html 使用Ajax 实现多文件上传，并显示进度

来源：互联网发布：淘宝订单险要求是什么编辑：程序博客网时间：2024/06/05 23:56

此项目实现了使用ajax多文件上传，并获取到上传进度显示到html，后台为flask
前台html,js部分是共用的，后台我使用的是python-flask，根据语言不同，接收端不同，但基本上都是一样的

文件下载地址：http://download.csdn.net/detail/u013934914/9372435

目录结构

这里写图片描述

结果预览

这里写图片描述

1.muilti-upload.html

<!DOCTYPE html><html><head>    <title>测试 - 多图片上传 - muilti-upload</title>    <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet" type="text/css" /></head><body>    <script src="{{ url_for('static', filename='jquery-2.1.4.min.js') }}"></script>    <script src="{{ url_for('static', filename='yupload.js') }}"></script>    <br/><br/>    <div id="mybox"></div>    <div> <ul id="nameList"></ul> </div>    <br/>上传进度：<br/><br/>    <div class="progress" id="progress">      <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" id="progress-bar" style="width: 0%;">        <span class="sr-only">0% Complete</span>      </div>    </div><br/>    <input type="button" value="提交" id="upload-button">    <br/>    <script type="text/javascript">        $(function () {            var $progress = $('#progress-bar');            var $nameList = $('#nameList');            var filebox = $('#mybox').yupload({                btnText     : '浏览' ,                maxSize     : 1024*1024*10  ,//10M                url         : '/muilti-upload',                onSelect    : function(list){                    var htmlArr = [];                    for(var i=0,len=list.length,item;i<len;i++){                        item = list[i];                        htmlArr.push('<li><span>'+item.size+'</span><span>'+item.name+'</span></li>');                    }                    $nameList.html(htmlArr.join(''));                },                onUpload    : function(p){                    $progress.width(p+'%').children(".sr-only").text(p+"% Complete");                }            });            $("#upload-button").on("click", function(e) {                filebox.submitUpload();            })        });    </script></body></html>

2.yupload.js

jQuery.fn.extend( {    yupload : function(config) {        var def = {            btnText     : '浏览...',      //按钮的文本            accept      : '*',              //选择的文件类型            maxSize     : 1024*1024 ,       //单个文件大小            multiple    : true ,            //是否上传多个文件            url         : '',               //提交的地址            method      : "POST",           //提交的方式            onSubmit    : function(v){},    //提交到制定服务后的回调事件；参数为服务端返回的参数            onSelect    : function(l){},    //选择文件后触发的事件；参数为选择的文件列表            onUpload    : function(p){},    //上传文件时，出发的事件；参数为当前的进度        }        config = $.extend({},def, config);        /* ============变量============ */        var $this = $(this);        var PENDING_FILES = []; //文件列表        var $file  = document.createElement("input"),            $btn   = document.createElement("input");        /* ============自定义方法============ */        var setStyle = function(){            $this.addClass("file-box");            $file.type         = 'file';            $file.accept   = config.accept;            $file.className = "file-file";            if(config.multiple) $file.setAttribute("multiple", "multiple");            $btn.type      = "button";            $btn.className     = "file-btn";            $btn.value         = config.btnText;            $this.append($file);            $this.append($btn);        },        loadEvent = function(){            var maxsize = config.maxSize;            $file.onchange = function(){                var files = this.files;                for (var i = 0, ie = files.length ,item; i < ie; i++) {                    item = files[i];                    // 在这里做验证                    if(item.size > maxsize){                        alert('大小超过配置的最大值！\n当前大小为：'+item.size+'\n要求的最大值为：'+maxsize);                        return;                    }                    PENDING_FILES.push(item);                }                config.onSelect(files);            }        },        //提交上传        submitUpload = function(){            if(!config.url){                config.onSubmit({error:'提交的URL地址错误'});                return;            }            var param = new FormData();            // 绑定参数            for (var i = 0, ie = PENDING_FILES.length; i < ie; i++) {                param.append("file", PENDING_FILES[i]);            }            var xhr = $.ajax({                xhr: function() {                    var xhrobj = $.ajaxSettings.xhr();                    if (xhrobj.upload) {                        xhrobj.upload.addEventListener("progress", function(event) {                            var percent = 0;                            var position = event.loaded || event.position;                            var total    = event.total;                            if (event.lengthComputable) {                                percent = Math.ceil(position / total * 100);                            }                            config.onUpload(percent);                        }, false)                    }                    return xhrobj;                },                url: config.url,                method: config.method,                contentType: false,                processData: false,                data: param,                success: function(data, textStatus) {config.onSubmit(data); } ,                error  : function(XMLHttpRequest, textStatus, errorThrown){                    config.onSubmit({error:XMLHttpRequest});                    return;                }            });        }        setStyle();        loadEvent();        return {            submitUpload : submitUpload ,            getFiles     : PENDING_FILES,        }    }});

3.后台接收部分：application.py

# coding=utf-8from flask import Flask ,render_template ,request ,jsonifyimport os,sysapp = Flask(__name__)@app.route('/muilti-upload' , methods=['GET','POST'])def muiltiUpload():    if request.method == 'POST':        """Handle the upload of a file."""        form = request.form        # 这里获取绝对路径        abpath = os.path.abspath('./upload/')        for upload in request.files.getlist("file"):            filename = upload.filename.rsplit("/")[0]            destination = "/".join([abpath, filename])            upload.save(destination)        return jsonify(status='ok' ,msg='OVER')    else:        return render_template('muilti-upload.html')if __name__ == '__main__':    app.run(host="localhost" , debug=True)

1 0