您的位置：首页 > Web前端 > HTML

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

2015-12-22 17:13 344 查看

此项目实现了使用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-8
from flask import Flask ,render_template ,request ,jsonify
import os,sys
app = 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)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航