关于使用jQuery完成文件上传功能

HTML中的表单控制一直是我的薄弱环节，尤其是关于文件的读写方面更是软肋。一直犯懒不想再去看，抱着用的时候查资料的想法。最近一个项目又出现了这个需求。好吧~总结下，以后用的着，先来妹子镇楼，百度到的图片，有版权了别告我啊。

我也不知道这是谁，好像是紫罗兰花园里面的妹子

首先是要用到bootstrap框架，不会的自己百度学去。写下我们的html代码；

<div class="form-group">
       <label class="sr-only" for="lefile">上传</label>
        <input id="lefile" type="file" style="display:none" name="file">
          <div class="input-group">
              <div class="input-group-addon" onclick="$('input[id=lefile]').click();">
                   <span class="glyphicon glyphicon-folder-open" aria-hidden="true"> 选择文件</span>
              </div>
        <label class="sr-only" for="showfile">显示框</label>
        <input type="text" class="form-control" id="showfile" placeholder="请选择要上传的文件">
         <div class="input-group-addon " id="uploadSubmit" onclick="fire_ajax_submit()">
              <span class="glyphicon glyphicon-open" aria-hidden="true"></span> 上传
           </div>
         </div>
 </div>

默认的bootstrap样式不适合我们的具体使用环境，还需要重置一部分CSS样式。

.input-group-addon{
        cursor: pointer;
}
.input-group-addon:hover,.input-group-addon:focus {
        color: #333;
        background-color: #e6e6e6;
}
.input-group-addon:active{
        outline: 0;
        -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);   //交互反馈，用户点下去好像按钮“陷”下去了。
        box-shadow: inset 0 3px 5px rgba(0,0,0,.125);    //啥意思呢？就是加盒内阴影的意思。
}
#uploadSubmit{
        background-color:#d9534f;
        border-color: #d43f3a;
        color:white;
}
#uploadSubmit:hover,#uploadSubmit:focus {
        color: white;
        background-color: #c9302c;
}

页面上就会显示出这个样子

上传功能组件

要实现再input里面显示出我们要上传文件的源路径还需要一点点jQuery代码完成一点点逻辑。另外我们需要让百分比的文字显示出来，这个时候需要设置一个最小宽度或是指定初始宽度。

 $(document).ready(function () {
                $('input[id=lefile]').change(function () {
                    $('#showfile').val($(this).val());
                });
                $('#bulk-action-progbar').css('width','2%');
            });

理论上这个时候我们就要去处理上传事件了，不过在这之前先要和我们的“后端工程师”协商我们form提交的地址，或者你自己就是所谓的“全栈”自己去写拦截器。反正要搞定form的action属性。

 <form action="PHP/JAVA/Node等等拦截器的URL" method="post" enctype="multipart/form-data" id="fileUploadForm">
     /*上面HTML代码放进来*/
 </form>

到这里我们暂时忍住自己的“创作冲动”，先不去写AJAX代码，项目中需要优先考虑用户体验和交互反馈。这个时候我们需要加入一个“进度条”来显示上传进度和一个“警告窗”告诉用户成功或是失败或是错误。

<!--下面这货是bootstrap的进度条-->
 <div class="progress" id="progress" style="display: none">
                    <div class="progress-bar progress-bar-striped active progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="bulk-action-progbar" style="min-width: 2em;"> </div>
 </div>

<!--下面这货是bootstrap的通知框-->
<div class="alert alert-success alert-dismissible" role="alert" id="result" style="display: none">
   <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
   <strong>信息：</strong><span id="resultTxt"></span>
</div>

可以看到我已经加入了行内样式style="display: none"，这是为了再用户没做操作的时候隐藏它们并再合适的时候让他们显示。好了，到这里我们就完成了样式方面的工作，可以着手完成上传功能了。我们需要使用jQuery中已经封装好的$.ajax，关于上传进度方面的操作可以用$.ajax中的xhr来实现。

开始装

代码比较多……

      function fire_ajax_submit() {
                var form = $('#fileUploadForm')[0];
                var data = new FormData(form);
                //data.append("extraField", "This is some extra data, testing");
                var obj_file = document.getElementById("lefile");
                //alert(obj_file.files[0].size/1021/1024);
                var maxsize = 100 * 1024 * 1024; //100M
                $.ajax({
                    type: "POST",
                    enctype: 'multipart/form-data',
                    url: "${pageContext.request.contextPath}/file/apkUpload",
                    data: data,
                    processData: false, //prevent jQuery from automatically transforming the data into a query string
                    contentType: false,
                    cache: false,
                    timeout: 600000,
                    xhr: function () {
                           var myXhr = $.ajaxSettings.xhr();
                        if (myXhr.upload) {
                            myXhr.upload.addEventListener('progress', function (e) {
                                if (e.lengthComputable) {
                                    var percent = Math.floor(e.loaded / e.total * 100);
                                    if (percent <= 100) {
                                        $('#bulk-action-progbar').data("aria-valuenow", percent);
                                        $('#bulk-action-progbar').css("width",percent+'%');
                                        $('#bulk-action-progbar').text(percent+'%');
                                    }
                                }
                            }, false);
                        }
                        return myXhr;
                    },
                    beforeSend: function () {
                        $('#progress').show();
                    },
                    complete: function () {
                        $("#progress").hide();
                    },
                    success: function (data) {
                        $("#result").removeClass("alert-danger").addClass("alert-success").show();
                        $("#resultTxt").text(JSON.stringify(data));
                        $('#showfile').val();
                        console.log("SUCCESS : ", data);
                    },
                    error: function (e) {
                        $("#result").removeClass("alert-success").addClass("alert-danger").show();
                        $("#resultTxt").text(JSON.stringify(e));
                        console.log("ERROR : ", e);
                    }
                });
            }

需要小注意的地方是，这一长坨代码必须放在$(document).ready(function(){});的外面。

上传成功

不过有一个小BUG！显示的不是真正的地址。毛毛雨无所谓了，我们已经实现了主要功能了！