原生原生javascript上传图片带进度条【实例分享】上传图片带进度条【实例分享】
javascript代码：代码：
;
(function(w) {
var error = "上传控件不支持您的浏览器！";
// 构造函数
function UploadImg(option) {
$u = this;
$u.option = option;
$u.init($u.option);
}
UploadImg.prototype = {
//初始化
init: function() {
var $u = this;
//template
$u.addupLoader =
'<form enctype="multipart/form-data">' +
'<label style="display:block;width:100%;cursor:pointer;height:100%;position: absolute;">' +
'<input class="kechenFengMian" type="file" capture="camera" name="file"/>' +
'</label>' +
'</form> ' +
'<img src="" width="280" height="160" />' +
'<div class="upload-progress"><span class="upload-son">等待中……</span></div>' +
'<div class="mask-Div">' +
'<div class="mask-show"></div>' +
'<div class="button-div">' +
'<span class="upload-btn"></span>' +
'<span class="deleteImg-btn"></span></div>' +
'</div>';
$u.wrap = $($u.option.el);
$u._creatFrom();
$u.eventChange($u.wrap.childNodes);
},
//生成form模板
_creatFrom: function() {
this.wrap.innerHTML = $u.addupLoader;
},
_removeFrom: function() {
this.wrap.innerHTML = "";
},
//事件触发
/*
*对于onchange事件若值没有发生改变的话
*此事件就会失效所以在这里打算将DOM移除
*直接初始化所有方法和事件
*
*/
/**
*@method (eventChange)
*@param {childArr} 参数为数组集合
*/
eventChange: function(childArr) {
var $u = this;
//提交form表单
addEvent(childArr[0], 'change', function(e) {
//保存当前this对象
var thisForm = this;
if (!thisForm['file'].files.length == 0) {
$u._removeFrom();
$u.init();
testWidthHeight(e,function(iSsize){
if(!iSsize){
alert("上传的尺寸为:长为"+$u.option.Max_Width +"宽为"+$u.option.Max_Height);
return false;
}
childArr[2].setAttribute('src', "");
childArr[3].style.display = 'block';
$u.wrap.style.background = "#f3f3f3";
//发送post请求
$u.ajaxPost(thisForm, $u.option.url, function(result) {
//post成功
var data = JSON.parse(result);
$u.maskEvent(childArr);
childArr[2].setAttribute('src', data.url);
childArr[3].style.display = 'none';
资源评论
weixin_38681719
- 粉丝: 8
- 资源: 930
最新资源
- 径向基函数神经网络python案例
- 跳过具有等级的列表，代码小于 redis 中的 z-set.zip
- narutoAppStore_mingtong_1.9.3.ipa
- 物体检测31-YOLO（v5至v9）、COCO、Darknet数据集合集.rar
- 简单的基于 redis 的缓存，用于存储 python 函数调用的结果、json 编码的字符串或 html .zip
- 第一个保证最终一致性和与DB强一致性的Redis缓存库 .zip
- OpenCV计算机视觉项目实战 - 文档扫描OCR识别源码（基于Python + OpenCV）
- 使用 ansys cfx 进行蝶阀仿真
- c#写日志功能类 初学者
- 移动hhhhhhhhhhhh
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
