文件上传

常见的文件上传方式

1.表单上传

<form method="post" action="http://uploadUrl" enctype="multipart/form-data">
    <input name="file" type="file" accept="image/gif,image.jpg" />
    <input name="token" type="hidden" />
    <input type="submit" value="提交" /> 
</form>

method="post"： 采用post方式提交数据
enctype="multipart/form- data"：采用multipart格式上传文件，此时request头会显示 Content-Type:multipart/form-data; boundary=—-WebKitFormBoundaryzr34cwJ67R95KQC9
action：标明上传的服务端处理地址
type="file"：使用input的file控件上传
如果是多文件批量上传，可以将input[type=”file”]的name属性设置为如：name=”file[]”
accept属性是HTML5的新属性，它规定了可通过文件
上传提交的文件类型
上传的触发事件可以是：input[type=”file”]的onChange触发，也可以由一个独立的按钮的onClick使整个表单提交，此时还可以用input[type="hidden"]带一些其它的参数，比如Token来源验证等等。

2.Ajax上传

这个方式比较推荐

<form>
    <input id="file" name="file" type="file" />
    <input id="token" name="token" type="hidden" />
</form>

$("#file").on("change", function(){
  var formData = new FormData();
  var file = document.getElementById('fileToUpload').files[0];
  //这里可以做一下判断
  var fileSize = file.size;
  if(fileSize > 10 * 1024 1024){
    alert('文件不能超过10M')
  }
  var  filePath = $('#fileId').val().toLowerCase().split(".");
  var fileType =  filePath[filePath.length - 1]; //文件类型  可以对上传的类型做限制
  formData.append("file", $("#file")[0].files);
  formData.append("token", $("#token").val());
  $.ajax({
      url: "http://uploadUrl",
      type: "POST",
      data: formData,
      processData: false,
      contentType: false,
      success: function(response){
              // 根据返回结果指定界面操作
      }
  });
});

3.Flash上传

这个没用过....

<div id="file_upload"></div>
$(function() {
  $("#file_upload").uploadify({
      auto: true,
      method: "Post",
      width: 120,
      height: 30,
      swf: './uploadify.swf',
      uploader: 'http://uploadUrl',
      formData: {
          token: $("#token").val()
      },
      fileObjName: "file",
      onUploadSuccess: function(file, data, response){
          // 根据返回结果指定界面操作
      }
  });
});

不想手动写的话也可以用插件

1.Mini AJAX File Upload Form

这个插件的UI和体验都非常棒，不过它依赖于下面介绍的jQuery File Upload plugin。

特点

• 支持多文件上传

• 支持一次选择多个文件上传

• 可上传任意文件

• 拖拽支持

• 无需flash

• 小巧的上传表单适合移动设备

• 简洁的进度条

• 可随时取消

• 有文档

• 免费
  http://demo.tutorialzine.com

2.Dropzone JS

一个轻量级的文件上传插件，使用起来非常简单，支持jquery，但并不依赖jquery，文档齐全，非常推荐。

特点

响应式设计

支持多文件上传

支持所有文件格式

图片上传可预览

顶级的UI设计

取消和删除文件的选项

拖拽支持

支持一次选择多个文件上传

免费
http://www.dropzonejs.com/

3.jQuery File Upload Demo

这个插件就不用多说了，可能是最火的文件上传插件。功能齐全，文件上传的后端代码都实现了。不过感觉文档很乱，默认UI也不是很好看，如果让我选择我会选择上面的Dropzone JS。

特点

拖拽支持

Html进度条

支持多文件上传

可恢复文件上传

文件验证以及大小信息

取消上传

删除上传的文件

上传失败显示alert提示。

响应式设计

支持Ruby

支持php

免费
http://blueimp.github.io/jQuery-File-Upload/