html文件上传

1. 传统方式

<form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" >
　　　<input type="file" id="upload" name="upload" /> <br />
　　　<input type="submit" value="Upload" />
</form>

2. iframe上传

用户点击submit的时候，动态插入一个iframe

var form = $("#upload-form");
form.on('submit',function() {
　　// 此处动态插入iframe元素
});

动态插入iframe代码

var seed = Math.floor(Math.random() * 1000);
var id = "uploader-frame-" + seed;
var callback = "uploader-cb-" + seed;

var iframe = $('<iframe id="'+id+'" name="'+id+'" style="visibility:hidden;width:0;height:0;">');
var url = form.attr('action');
form.attr({'action': url + '?iframe=' + callback,'target': id}).append(iframe)；

window[callback] = function(data){
　　console.log('received callback:', data);
　　iframe.remove(); //removing iframe
　　form.removeAttr('target');
　　form.attr('action', url);
　　window[callback] = undefined; //removing callback
};

最后一行，它为表单添加target属性。指向动态插入的iframe。这样上传结束后服务器将结果返回iframe窗口。所以当前页面不会跳转。其次，在它的action属性指定的上传网址的后面添加一个参数，使得服务器知道回调函数的名称。这样就能将服务器返回的信息，从iframe窗口传到上层页面。
服务器返回的信息应该如下：

<script type="text/javascript">
　　window.top.window['callback'](data);
</script>

3. 初步使用FormData(ajax上传)

ajax上传文件，放在表单的submit事件的回调函数中。

form.on('submit',function() {
　　// 此处进行ajax上传
});

进行ajax上传

// 检查是否支持FormData
if(window.FormData) {　
　　var formData = new FormData();

　　// 建立一个upload表单项，值为上传的文件
　　formData.append('upload', document.getElementById('upload').files[0]);
　　var xhr = new XMLHttpRequest();
　　xhr.open('POST', $(this).attr('action'));
　　// 定义上传完成后的回调函数
　　xhr.onload = function () {
　　　　if (xhr.status === 200) {
　　　　　　console.log('上传成功');
　　　　} else {
　　　　　　console.log('出错了');
　　　　}
　　};
　　xhr.send(formData);
}

为ajax上传文件添加进度条

1. 预先在html中添加progress元素

<progress id="uploadprogress" min="0" max="100" value="0">0</progress>

2. 定义progress的回调函数

xhr.upload.onprogress = function (event) {
　　if (event.lengthComputable) {
　　　　var complete = (event.loaded / event.total * 100 | 0);
　　　　var progress = document.getElementById('uploadprogress');
　　　　progress.value = progress.innerHTML = complete;
　　}
};

图片预览

// 检查是否支持FileReader对象
if (typeof FileReader != 'undefined') {
　　var acceptedTypes = {
　　　　'image/png': true,
　　　　'image/jpeg': true,
　　　　'image/gif': true
　　};
　　if (acceptedTypes[document.getElementById('upload').files[0].type] === true) {
　　　　var reader = new FileReader();
　　　　reader.onload = function (event) {
　　　　　　var image = new Image();
　　　　　　image.src = event.target.result;
　　　　　　image.width = 100;
　　　　　　document.body.appendChild(image);
　　　　};
　　　　reader.readAsDataURL(document.getElementById('upload').files[0]);
　　}
}

拖拽上传

先在页面中放置一个容器，用来接收拖放的文件

<div id="holder"></div>

对它设置样式：

#holder {
　　border: 10px dashed #ccc;
　　width: 300px;
　　min-height: 300px;
　　margin: 20px auto;
}

#holder.hover {
　　border: 10px dashed #0c0;
}

拖放文件的代码，主要是定义dragover、dragend和drop这三个事件。

// 检查浏览器是否支持拖放上传。
if('draggable' in document.createElement('span')){
　　var holder = document.getElementById('holder');
　　holder.ondragover = function () { this.className = 'hover'; return false; };
　　holder.ondragleave = function () { this.className = ''; return false; };
　　holder.ondrop = function (event) {
　　　　event.preventDefault();
　　　　this.className = '';
　　　　var files = event.dataTransfer.files;
　　　　// do something with files
　　};
}