参考：
http://www.zhangxinxu.com/wordpress/2011/09/%E5%9F%BA%E4%BA%8Ehtml5%E7%9A%84%E5%8F%AF%E9%A2%84%E8%A7%88%E5%A4%9A%E5%9B%BE%E7%89%87ajax%E4%B8%8A%E4%BC%A0/
js文件：
/**
* Created by joesbell on 2016/10/21.
*/
/**/
var ZXXFILE = {
fileInput: null, //html file控件
dragDrop: null, //拖拽敏感区域
upButton: null, //提交按钮
url: "", //ajax地址
fileFilter: [], //过滤后的文件数组
filter: function(files) { //选择文件组的过滤方法
return files;
},
onSelect: function() {}, //文件选择后
onDelete: function() {}, //文件删除后
onDragOver: function() {}, //文件拖拽到敏感区域时
onDragLeave: function() {}, //文件离开到敏感区域时
onProgress: function() {}, //文件上传进度
onSuccess: function() {}, //文件上传成功时
onFailure: function() {}, //文件上传失败时,
onComplete: function() {}, //文件全部上传完毕时
/* 开发参数和内置方法分界线 */
//文件拖放
funDragHover: function(e) {
e.stopPropagation();
e.preventDefault();
this[e.type === "dragover"? "onDragOver": "onDragLeave"].call(e.target);
return this;
},
//获取选择文件，file控件或拖放
funGetFiles: function(e) {
// 取消鼠标经过样式
this.funDragHover(e);
// 获取文件列表对象
var files = e.target.files || e.dataTransfer.files;
//继续添加文件
this.fileFilter = this.fileFilter.concat(this.filter(files));
this.funDealFiles();
return this;
},
//选中文件的处理与回调
funDealFiles: function() {
for (var i = 0, file; file = this.fileFilter[i]; i++) {
//增加唯一索引值
file.index = i;
}
//执行选择回调
this.onSelect(this.fileFilter);
return this;
},
//删除对应的文件
funDeleteFile: function(fileDelete) {
var arrFile = [];
for (var i = 0, file; file = this.fileFilter[i]; i++) {
if (file != fileDelete) {
arrFile.push(file);
} else {
this.onDelete(fileDelete);
}
}
this.fileFilter = arrFile;
return this;
},
//文件上传
funUploadFile: function() {
var self = this;
if (location.host.indexOf("sitepointstatic") >= 0) {
//非站点服务器上运行
return;
}
for (var i = 0, file; file = this.fileFilter[i]; i++) {
(function(file) {
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// 上传中
xhr.upload.addEventListener("progress", function(e) {
self.onProgress(file, e.loaded, e.total);
}, false);
// 文件上传成功或是失败
xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
self.onSuccess(file, xhr.responseText);
self.funDeleteFile(file);
if (!self.fileFilter.length) {
//全部完毕
self.onComplete();
}
} else {
self.onFailure(file, xhr.responseText);
}
}
};
// 开始上传
xhr.open("POST", self.url, true);
xhr.setRequestHeader("X_FILENAME", encodeURIComponent(file.name));
xhr.send(file);
}
})(file);
}
},
init: function() {
var self = this;
if (this.dragDrop) {
this.dragDrop.addEventListener("dragover", function(e) { self.funDragHover(e); }, false);
this.dragDrop.addEventListener("dragleave", function(e) { self.funDragHover(e); }, false);
this.dragDrop.addEventListener("drop", function(e) { self.funGetFiles(e); }, false);
}
//文件选择控件选择
if (this.fileInput) {
this.fileInput.addEventListener("change", function(e) { self.funGetFiles(e); }, false);
}
//上传按钮提交
if (this.upButton) {
this.upButton.addEventListener("click", function(e) { self.funUploadFile(e); }, false);
}
}
};
demo html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.upload_box{width:800px; margin:1em auto;}
.upload_main{border-width:1px 1px 2px; border-style:solid; border-color:#ccc #ccc #ddd; background-color:#fbfbfb;}
.upload_choose{padding:1em;}
.upload_drag_area{display:inline-block; width:60%; padding:4em 0; margin-left:.5em; border:1px dashed #ddd; background:#fff url(./drag.png) no-repeat 20px center; color:#999; text-align:center; vertical-align:middle;}
.upload_drag_hover{border-color:#069; box-shadow:inset 2px 2px 4px rgba(0, 0, 0, .5); color:#333;}
.upload_preview{border-top:1px solid #bbb; border-bottom:1px solid #bbb; background-color:#fff; overflow:hidden; _zoom:1;}
.upload_append_list{height:300px; padding:0 1em; float:left; position:relative;}
.upload_delete{margin-left:2em;}
.upload_image{max-height:250px; padding:5px;}
.upload_submit{padding-top:1em; padding-left:1em;}
.upload_submit_btn{display:none; height:32px; font-size:14px;}
.upBtnWarp{
position: relative;
display: inline-block;
width: 100px;
height: 40px;
overflow: hidden;
background:deepskyblue;
color: white;
text-align: center;
line-height: 40px;
border-radius: 5px;
}
.upBtn{
position: absolute;
font-size: 100px;
right: 0;
top: 0;
bottom: 0;
cursor: pointer;
}
.upload_loading{height:250px; background:url(/study/image/preload.gif) no-repeat center;}
.upload_progress{display:none; padding:5px; border-radius:10px; color:#fff; background-color:rgba(0,0,0,.6); position:absolute; left:25px; top:45px;}
</style>
</head>
<body>
<div id="main">
<h1>基于HTML5的多图Ajax上传实例页面</h1>
<div id="body" class="light">
<div id="content" class="show">
<div class="demo">
<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
<div class="upload_box">
<div class="upload_main">
<div class="upload_choose">
<div class="upBtnWarp">
上传图片
<input id="fileImage" class="upBtn" type="file" size="30" name="fileselect[]" multiple />
</div>
<span id="fileDragArea" class="upload_drag_area">或者将图片拖到此处</span>
</div>
<div id="preview" class="upload_preview"></div>
</div>
<div class="upload_submit">
<button type="button" id="fileSubmit" class="upload_submit_btn">确认上传图片</button>
</div>
<div id="uploadInf" class="upload_inf"></div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.4.4/jquery.js"></script>
<script src="./FileLoader.js"></script>
<script>
var params = {
fileInput: $("#fileImage").get(0),
dragDrop: $("#fileDragArea").get(0),
upButton: $("#fileSubmit").get(0),
url: $("#uploadForm").attr("action"),
filter: function(files) {
var arrFiles = [];
for (var i = 0, file; file = files[i]; i++) {
if (file.type.indexOf("image") == 0) {
if (file.size >= 512000) {
alert(‘您这张"‘+ file.name +‘"图片大小过大，应小于500k‘);
} else {
arrFiles.push(file);
}
} else {
alert(‘文件"‘ + file.name + ‘"不是图片。‘);
}
}
return arrFiles;
},
onSelect: function(files) {
var html = ‘‘, i = 0;
$("#preview").html(‘<div class="upload_loading"></div>‘);
var funAppendImage = function() {
file = files[i];
if (file) {
var reader = new FileReader()
reader.onload = function(e) {
html = html + ‘<div id="uploadList_‘+ i +‘" class="upload_append_list"><p><strong>‘ + file.name + ‘</strong>‘+
‘<a href="javascript:" class="upload_delete" title="删除" data-index="‘+ i +‘">删除</a><br />‘ +
‘<img id="uploadImage_‘ + i + ‘" src="‘ + e.target.result + ‘" class="upload_image" /></p>‘+
‘<span id="uploadProgress_‘ + i + ‘" class="upload_progress"></span>‘ +
‘</div>‘;
i++;
funAppendImage();
}
reader.readAsDataURL(file);
} else {
$("#preview").html(html);
if (html) {
//删除方法
$(".upload_delete").click(function() {
ZXXFILE.funDeleteFile(files[parseInt($(this).attr("data-index"))]);
return false;
});
//提交按钮显示
$("#fileSubmit").show();
} else {
//提交按钮隐藏
$("#fileSubmit").hide();
}
}
};
funAppendImage();
},
onDelete: function(file) {
$("#uploadList_" + file.index).fadeOut();
},
onDragOver: function() {
$(this).addClass("upload_drag_hover");
},
onDragLeave: function() {
$(this).removeClass("upload_drag_hover");
},
onProgress: function(file, loaded, total) {
var eleProgress = $("#uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + ‘%‘;
eleProgress.show().html(percent);
},
onSuccess: function(file, response) {
$("#uploadInf").append("<p>上传成功，图片地址是：" + response + "</p>");
},
onFailure: function(file) {
$("#uploadInf").append("<p>图片" + file.name + "上传失败！</p>");
$("#uploadImage_" + file.index).css("opacity", 0.2);
},
onComplete: function() {
//提交按钮隐藏
$("#fileSubmit").hide();
//file控件value置空
$("#fileImage").val("");
$("#uploadInf").append("<p>当前图片全部上传完毕，可继续添加上传。</p>");
}
};
ZXXFILE = $.extend(ZXXFILE, params);
ZXXFILE.init();
</script>
</body>
</html>
时间： 2024-10-12 19:21:53