前端上传控件使用心得
最近有项目使用https，原使用的上传控件uploadify好好的功能不能用了，分析主要原因是swf上传在ssl认证上有点问题。在本机模拟了ssl证书，经测试发现只有IE不行，IE上传到服务器的文件大小都是0，而firefox、chrome都可以正常使用。
为解决https下文件上传问题，改用了jquery-file-upload控件。功能用的比较简单，每上传一个文件，在下面列表上新增一行数据，每一行数据可以有按钮点击上传，能显示上传进度，支持回调
<div>
<div>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</div>
<!-- The container for the uploaded files -->
<table id="files" class="files" style="width:100%"></table>
</div>$('#fileupload').fileupload({
url:'/uploadify/UploadServlet',
dataType: 'json',
progress: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
data.context.text('Uploading '+progress + '%');
},
add: function (e, data) {
var $tr = $("<tr/>");
$("<td/>").css("width","60%").text(data.files[0].name).appendTo($tr);
$("<td/>").css("width","40%").append($('<button/>').text('Upload').click(function () {
data.context = $('<p/>').text('Uploading').replaceAll($(this));
data.submit();
})).appendTo($tr);
data.context = $tr.appendTo($('#files'));
},
done: function (e, data) {
//data.result即后台返回的json数组
data.context.text('Finished');
alert(data.files[0].name+":dosomething!");
}
});效果如下图
这里碰到两个问题，1）IE8上传的文件file.getName()获取到的文件名带有全路径，这一点可以在代码层判断处理一下；2) IE10以下不支持返回json数据，如果设置response.setContentType("application/json") 会导致response写的json数据在IE下显示下载json文件，而直接设置成response.setContentType("text/html;charset=UTF-8")就可以了。