jquery ajax多文件上传，进度条

最新推荐文章于 2023-05-24 17:53:03 发布

VIP文章 yangliuhbhd

最新推荐文章于 2023-05-24 17:53:03 发布

阅读量3k

点赞数 1

分类专栏： JS，JQUERY 文章标签： ajax jquery jquery ajax 多文件上传

本文链接：https://blog.csdn.net/yangliuhbhd/article/details/78732028

版权

1.JSP页面部分引入 jQuery v1.8.3.js和bootstrap.css

//配置项
<script type="text/javascript">
    var config = {
        support: "image/jpg,image/png,image/bmp,image/jpeg,image/gif",		// Valid file formats
        form: "demoFiler",					// Form ID
        dragArea: "dragAndDropFiles",		// Upload Area ID
        uploadUrl: "${ctx}/upload/fileUpload",				// Server side upload url
        submitHandler:"submitHandler"    //上传按钮
    }
</script>

//JSP页面
 <form name="demoFiler" id="demoFiler" enctype="multipart/form-data">
          <input type="file" name="multiUpload" id="multiUpload" multiple/>
          <input type="button" name="submitHandler" id="submitHandler" value="Upload" class="buttonUpload"/>
           </form>
           <div class="progress progress-striped active">
           <div style="width: 0.1%;" class="bar"></div>
            </div>

2.JS

var path=getContextPath();
var delFileList=[];

$(document).ready(function () {
    initMultiUploader(config);
});
function multiUploader(config) {

    this.config = config;
    this.items = "";
    this.all = [] ;
    this.allFileLists  = [];
    var self = this;

    multiUploader.prototype._init = function () {
        if (window.File &&
            window.FileReader &&
            window.FileList &&
            window.Blob) {
            var inputId = $("#" + this.config.form).find("input[type='file']").eq(0).attr("id");
            document.getElementById(inputId).addEventListener("c