1.首先展示ajaxfileupload代码,在这里修改为批量上传
//ajaxfileupload不展示全部代码,这是修改前与修改后代码对比,目的是上传多个文件 createUploadForm: function (id, fileElementId, data) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); if (data) { for (var i in data) { jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); } } //修改前代码------- // var oldElement = jQuery('#' + fileElementId); // var newElement = jQuery(oldElement).clone(); // jQuery(oldElement).attr('id', fileId); // jQuery(oldElement).before(newElement); // jQuery(oldElement).appendTo(form); //修改前代码------- //修改后代码------- for (var i in fileElementId) { var oldElement = jQuery('#' + fileElementId[i]); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); } //修改后代码------- //set attributes jQuery(form).css('position', 'absolute'); jQuery(form).css('top', '-1200px'); jQuery(form).css('left', '-1200px'); jQuery(form).appendTo('body'); return form; },
2.展示js代码 (里面layer为第三方插件忽略改为alert即可)
//检查尺寸是否符合规范 function uploadImgCheckedPx(f, w, h, callback) { var reader = new FileReader(); reader.onload = function (e) { //判断图片尺寸 var img = null; img = document.createElement("img"); document.body.insertAdjacentElement("beforeend", img); img.style.visibility = "hidden"; img.src = this.result; var imgwidth = img.naturalWidth; var imgheight = img.naturalHeight; if (imgwidth != w || imgheight != h) { document.body.removeChild(img); //隐藏 layer.closeAll('loading'); layer.alert("图片尺寸必须是" + w + "x" + h + "!"); callback && callback(false); } else { callback && callback(true); } } var files = f.files; if (files.length > 0) reader.readAsDataURL(files[0]); } //上传图片到百度云(这里是向后台提交文件,然后后台进行上传百度云等云服务器) function uploadImgBack(inputArray, callback) { $.ajaxFileUpload ({ url: "/Handler/ImgFileUpload.ashx", //用于文件上传的服务器端请求地址 async: true, secureuri: false, //一般设置为false //fileElementId: 'uploadfile1', //修改前代码 fileElementId: inputArray, //已数组方式存储 input Id dataType: 'json', //返回值类型 一般设置为json //不能用success,否则不执行 complete: function (data) { try { data = jQuery.parseJSON(data.responseXML.documentElement.innerText); } catch (e) { data = jQuery.parseJSON(data.responseXML.documentElement.textContent); } if (data.state == "0") { callback && callback(data.msg); } else { //隐藏 layer.closeAll('loading'); layer.alert(data.msg); callback && callback(-1); } } }); } //上传图片 /* inputArray 上传inputId 数组 callback 成功后回调函数 w, px宽 h, px高 */ function uploadImg(inputArray, callback, w, h) { if (w && h) { var resStateArray = []; for (var i = 0; i < inputArray.length; i++) { var f = document.getElementById(inputArray[i]); uploadImgCheckedPx(f, w, h, function (state) { resStateArray.push(state); }); } var tempInterval = setInterval(function () { console.log(resStateArray); if (resStateArray.length == inputArray.length) { clearInterval(tempInterval); if (resStateArray.indexOf(false) != -1) { callback && callback(-1); } else { uploadImgBack(inputArray, function (res) { callback && callback(res); }); } } }, 500); } else { uploadImgBack(inputArray, function (res) { callback && callback(res); }); } }
3.展示html 调用js封装代码进行提交
<input type="file" name="name" id="uploadBigImg1" hidden onchange="preImg(this.id,'BigImg1');" readonly datatype="*" nullmsg="请选择图片!" /> <input type="file" name="name" id="uploadBigImg2" hidden onchange="preImg(this.id,'BigImg2');" readonly /> <input type="file" name="name" id="uploadBigImg3" hidden onchange="preImg(this.id,'BigImg3');" readonly />
var imgBigArrar = []; imgBigArrar.push("uploadBigImg1"); imgBigArrar.push("uploadBigImg2"); imgBigArrar.push("uploadBigImg3"); //调用Js uploadImg(imgBigArrar, function (res) { if (res != -1) { //res 是上传完成的云资源 // } }, 1242, 496); //1242 宽,496高 不加即为不限制尺寸大小
//后台C# 代码接收请求
public class ImgFileUpload : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string path = ""; string msg = ""; if (path.LastIndexOf('/') != path.Length - 1) path += "/"; var files = HttpContext.Current.Request.Files;
//do something ....
}
}