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

目前，几个项目中用到了不同的方法，总结一下分享出来。

第一种，通过FormData来实现。

首先，添加input控件file。

<input type="file" name="uploadFile1" id="uploadFile1" runat="server" value="" multiple accept="image/jpg,image/jpeg,image/png,image/bmp,video/*"/>

然后添加对应的前端代码。

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);

第二个，微信JSSDK接口，这个用起来比较方便，但是必须在微信的环境中应用，有局限性。

  wx.config({
         debug: false,
         appId: '<% = config.appId%>',
         timestamp: '<% = config.timestamp%>',
         nonceStr: '<% = config.nonceStr%>',
         signature: '<% = config.signature%>',
         jsApiList: ['chooseImage',
             'previewImage',
             'uploadImage',
             'downloadImage'
         ]
     });

     var serverIds = ""
     function uploadImg() {
         if(serverIds!="")
         {
             serverIds="";
         }
         wx.chooseImage({
             count: 1,
             sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
             sourceType: ['album', 'camera'],      // 可以指定来源是相册还是相机，默认二者都有
             success: function (res) {
                 var localIds = res.localIds;      // 返回选定照片的本地ID列表
                 syncUpload(localIds);             // localId可作为img标签的src属性显示图片
             }
         });
     }

     function syncUpload(localIds) {
         var localId = localIds.pop();
         wx.uploadImage({
             localId: localId,                // 需要上传的图片的本地ID，由chooseImage接口获得
             isShowProgressTips: 1,           // 默认为1，显示进度提示
             success: function (res) {
                 var serverId = res.serverId; // 返回图片的服务器端serverId
                 serverIds = serverIds + serverId + ",";

                 if (localIds.length > 0) {
                     syncUpload(localIds);
                 } else {
                     $.ajax({
                         type: "POST",
                         url: "/tools/submit_ajax.ashx?action=img_upload",
                         dataType: "json",
                         data: {
                             "serverIds":serverIds
                         },
                         timeout: 20000,
                         success: function (data, textStatus) {
                             if(data.status==1){
                                 $("#picname").attr("src", data.msg);
                                 $("#hidImgUrl").attr("value",data.msg);
                             }else{
                                 alert(data.msg);
                             }
                         },
                         error:function(data){
                             alert("系统错误，请刷新页面重试！");
                         }
                     });
                 }
             }
         });
     };