前端上传控件使用心得

最近有项目使用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")就可以了。