jQuery插件实现文件上传功能支持拖拽

先贴上源代码地址，。然后直接进入主题啦，当然，如果你觉得我有哪里写的不对或者欠妥的地方，欢迎留言指出。在附上一些代码之前，我们还是先来了解下，上传文件的时候需要利用的一些必要的知识。

首先我们要说的就是FileReader对象，这是一个HTML5提出的，专门用来异步的读取用户计算机上文件的对象，。所以如果我们想要使用它，那么首先我们得先创建一个FileReader对象。

1、这个对象拥有五个方法：

下面附上一个例子：

效果图：

其他的几个方法也基本上大同小异，所以在这里就不做过多解释了。

2、这个对象还拥有三个状态常量：

3、这个对象还拥有三个属性：

4、6个事件处理程序：

这里我们再来说说formData对象，同样的我们利用它来上传文件，首先需要创建一个formData对象实例

在使用这个对象上传文件的时候，我们需要注意一点，需要在form标签上添加上enctype="multipart/form-data"这个属性，用来设置表单的MIME编码，因为默认的编码格式是application /x-www-form-urlencoded，不能用于文件上传，也可以在使用jQuery的$.ajax方法的时候，设置data属性为formData。 上面就是该DEMO主要用到的知识点，下面附上一些源代码，和效果图。

HTML代码：

JS代码：

//判断浏览器是否支持FileReader
if(!window.FileReader){
alert('您的浏览器不支持FileReader，请更换浏览器。');
return;
}

setting = $.extend(true,{},defaultSetting,setting);
setting.width < 450 && (setting.width = 450);

$(this).each(function (i,item) {
var demoHtml = '';
//是否可以拖拽图片上传，构造dom结构
if(setting.canDrag){
setting.height < 200 && (setting.height = 200);
demoHtml += '<div class="file_sel">';
demoHtml += '<div class="file_input">';
demoHtml += '<div class="sel_file_img">';
demoHtml += '<img src="img/add_img.png"/>';
demoHtml += '

';
demoHtml += '<div class="sel_file_btn">';
demoHtml += '<input type="file"/>';
demoHtml += '点击选择文件';
demoHtml += '