html5文件上传插件，附带使用说明

在之前的项目中，遇到了好几处上传，分到同事模块的时候，他使用的是flash插件进行上传，但是效果上做的不是很好，后来项目转接到我手上，又增加了许多新功能，需要改进上传，所以我就在网上搜了下，找到了html5上传，虽然有对之前浏览器不兼容的问题，但是我们这个是属于后台系统，不用兼容各种浏览器，所以就使用了。后来又频繁在多处用到，所以就做成插件了。今天共享出来给大家方便使用，很方便就可以整合到自己的项目中去了。关于JS我也是菜鸟，边学习边总结，有更好的方案，希望大家指定出来。

插件下载地址：http://download.csdn.net/detail/u010300707/8011515

好了，前言说了那么多，现在就开始讲一下这个插件吧。先讲提供的几个方法，然后在说例子。我会举一个例子的。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 setUploadParam

参数：data 是以大括号括起来的键值对 如{"username":"wanghuijun","password":"12321231"}

这个是设置再上传过程中还附带一些需要上传的参数。如果没有的话，就不用设置

setInputFile

参数：file 类型是文件引用类型 可以通过这样的方式获得：

var inputFile = document.getElementById("fileupload").files[0];

其中fileupload是file类型的input标签的id

这个方法就是设置要上传的文件了。这样在设置之前，大家也可以做一些校验操作，比如得到inputFile之后可以得到许多参数，有name，有size等

setUploadUrl

参数：url 

这个就是设置上传的路径了，也就是传给后台处理的PHP或者Java的那个什么，忘记了，就是后台处理路径吧。

setUploadFinishListener

参数：fn 

处理文件上传完毕后要处理的事情，很容易理解。

后面都是一些方法监听，从字面意思上都很容易理解，就不用一一描述了

setUploadFailedListener

setUploadProgressListener

参数是进度控制方法，该方法的参数是百分比，比如50%，参数就是50，具体参考例子

setUploadCancledListener

下面就是例子了

// ************************************上传文件**********************************************
var addImgText = $("#addImg").find("span").first();
var progressBar = $("#progress");
var bar = $("#bar");
var percent = $("#percent");

var fu = new FileUpload();
fu.setUploadUrl("../php/edit/groupuploadimg.php");
fu.setUploadFinishListener(function(responseStr){
var data = JSON.parse(responseStr);
var info = data.info;
if(info != "1"){
alert(info);
}else{
var imgurl = "../pics/"+data.pic;
g_imgsrc = "../pics/"+data.pic;
var name = data.pic;
var width = data.width;
var height = data.height;
var htmlStr = "";
if(width > height){
var margin = (200-height*(200/width))/2;
htmlStr = '<tr type="1">'+
'<td style="width: 200px;"><div style="height: 200px;width: 250px;padding-right:50px;vertical-align: middle;">'+
'<img style="width: 100%;margin-top:'+margin+'px" class="img-thumbnail" name="'+name+'" src="'+imgurl+'"/></div></td>'+
'<td width="70%"><textarea style="height: 200px;width:100%;"></textarea></td>'+
'<td style="margin-left: 20px;padding-left: 20px;">'+
'<p style="margin-bottom:10px;"><span class="btn btn_input btn_default">'+
'<button type="button" onclick="deleteImg(this)">删除</button></span></p>'+
'<p><div id="alertDiv" class="btn" data-toggle="tooltip" data-placement="bottom" style="margin-bottom: 10px;margin-top: 4px;">'+
'<span>   修改图片   </span>'+
'<input id="alertImg" type="file" name="mypic" onclick="alertImg(this)"></div></p>'+
'</td>'+
'</tr>';
}else{
var margin = (200-width*(200/height))/2;
htmlStr = '<tr type="1">'+
'<td style="width: 200px;"><div style="height: 200px;width: 250px;padding-right:50px;vertical-align: middle;">'+
'<img style="height: 100%;margin-left:'+margin+'px" class="img-thumbnail" name="'+name+'" src="'+imgurl+'"/></div></td>'+
'<td width="70%"><textarea style="height: 200px;width:100%;"></textarea></td>'+
'<td style="margin-left: 20px;padding-left: 20px;"><p style="margin-bottom:10px;"><span class="btn btn_input btn_default">'+
'<button type="button" onclick="deleteImg(this)">删除</button></span></p>'+
'<p><div id="alertDiv" class="btn" data-toggle="tooltip" data-placement="bottom" style="margin-bottom: 10px;margin-top: 4px;">'+
'<span>   修改图片   </span>'+
'<input id="alertImg" type="file" name="mypic" onclick="alertImg(this)"></div></p>'+
'</td>'+
'</tr>';
}
$("#imgList").append(htmlStr);
}
progressBar.hide();
addImgText.text("添加图片");
bar.width(0);
percent.html("0%");
$("#fileupload").val("");
});
fu.setUploadFailedListener(function(){
progressBar.hide();
addImgText.text("添加图片");
alert("上传失败");
$("#fileupload").val("");
});

fu.setUploadProgressListener(function(degree){
bar.width(degree+"%");
percent.html(degree+"%");
});

$("#fileupload").change(function(){
var inputFile = document.getElementById("fileupload").files[0];
fu.setInputFile(inputFile);
addImgText.text("正在上传");
progressBar.show();
bar.width(0);
percent.html("0%");
fu.uploadFile();
});

几点说明
1.上传的失败与否有很多因素，很多方面是后台的设置造成的，在这里我也不用把后台的接收文件的处理代码拿上来了，很简单，像PHP就一句话都能搞定。

然后就是我这个插件还没有加入异常控制，所以报错，自己去代码看，代码也不多，所以自己看也能找到问题的。以后会加上异常控制，更新新的版本。

2.在下一个文章中，我会和大家分享我自己写的一个jQuery，实现了里面部分功能，兼容和速度上，肯定比不上jQuery，但是他能满足在兼容手机浏览的网页中的很多功能了。

我做这个自己的jQuery，也是为了满足在手机上浏览网页造成流量大的问题，一个jQuery要96k，我写的只有3k，减少了不少流量吧。

3.有什么好的想法，好的建议都希望能留言，方便改进，我会把我在项目中能总结出来的东西都总结出来和大家分享。支持原创。