H5前端上传文件的几个解决方案

var input = document.getElementById("uploadFile"); ???var getOnloadFunc = function (aImg) { ???????return function (evt) { ???????????aImg.src = evt.target.result; ???????}; ???} ???input.addEventListener("change", function (evt) { ???????for (var i = 0, numFiles = this.files.length; i < numFiles; i++) { ???????????var file = this.files[i]; ???????????var img = document.createElement("img"); ???????????$(".tp").append(img); ???????????var reader = new FileReader(); ???????????reader.onload = getOnloadFunc(img); ???????????reader.readAsDataURL(file); ???????????alert(file.name); ???????????var fd = new FormData(); ???????????// 直接传递file对象到后台
　　　　　　　fd.append("image", file); ???????????fd.append("guanId", $("input[name=commonGuanId]").val()); ???????????$.ajax({ ???????????????url : ‘/tools/submit_ajax.ashx?action=sign_upload‘, ???????????????type : ‘POST‘, ???????????????data : fd, ???????????????processData: false, ???????????????contentType: false, ???????????????timeout : 10000, ???????????????success : function(data) { ???????????????????var mydata = JSON.parse(data); ???????????????????????????????????????if (mydata.status == 1) { ???????????????????????alert("上传成功"); ???????????????????} else { ???????????????????????alert("失败，请稍后重试！"); ???????????????????????????????????????????} ???????????????}, ???????????????error : function(xhr,textStatus){ ???????????????????//alert(‘上传失败，请稍后重试‘); ???????????????????????????????????} ???????????}); ???????} ???}, false);

 1 ?wx.config({ 2 ????????debug: false, 3 ????????appId: ‘<% = config.appId%>‘, 4 ????????timestamp: ‘<% = config.timestamp%>‘, 5 ????????nonceStr: ‘<% = config.nonceStr%>‘, 6 ????????signature: ‘<% = config.signature%>‘, 7 ????????jsApiList: [‘chooseImage‘, 8 ????????????‘previewImage‘, 9 ????????????‘uploadImage‘,10 ????????????‘downloadImage‘11 ????????]12 ????});13 14 15 ????var serverIds = ""16 ????function uploadImg() { 17 ????????if(serverIds!="")18 ????????{19 ????????????serverIds="";20 ????????}21 ????????wx.chooseImage({22 ????????????count: 1,23 ????????????sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图，默认二者都有 ?24 ????????????sourceType: [‘album‘, ‘camera‘], ?????// 可以指定来源是相册还是相机，默认二者都有 ?25 ????????????success: function (res) {26 ????????????????var localIds = res.localIds; ?????// 返回选定照片的本地ID列表 ?27 ????????????????syncUpload(localIds); ????????????// localId可作为img标签的src属性显示图片 ?28 ????????????}29 ????????});30 ????}31 32 ????function syncUpload(localIds) {33 ????????var localId = localIds.pop();34 ????????wx.uploadImage({35 ????????????localId: localId, ???????????????// 需要上传的图片的本地ID，由chooseImage接口获得 ?36 ????????????isShowProgressTips: 1, ??????????// 默认为1，显示进度提示 ?37 ????????????success: function (res) {38 ????????????????var serverId = res.serverId; // 返回图片的服务器端serverId ?39 ????????????????serverIds = serverIds + serverId + ",";40 41 ????????????????if (localIds.length > 0) {42 ????????????????????syncUpload(localIds);43 ????????????????} else {44 ????????????????????$.ajax({45 ????????????????????????type: "POST",46 ????????????????????????url: "/tools/submit_ajax.ashx?action=img_upload",47 ????????????????????????dataType: "json",48 ????????????????????????data: {49 ????????????????????????????"serverIds":serverIds50 ????????????????????????},51 ????????????????????????timeout: 20000,52 ????????????????????????success: function (data, textStatus) {53 ????????????????????????????if(data.status==1){54 ????????????????????????????????$("#picname").attr("src", data.msg);55 ????????????????????????????????$("#hidImgUrl").attr("value",data.msg);56 ????????????????????????????}else{57 ????????????????????????????????alert(data.msg);58 ????????????????????????????}59 ????????????????????????},60 ????????????????????????error:function(data){61 ????????????????????????????alert("系统错误，请刷新页面重试！");62 ????????????????????????}63 ????????????????????});64 ????????????????}65 ????????????}66 ????????});67 ????};