笔记整理-ajaxFileUpload使用实例

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript">
function submitForm() {
	var json = $("#myForm").serializeJSON();
	$.ajaxFileUpload({
		url : url,
		type : 'post',
		data : json,
		secureuri : false, 		//一般设置为false
		fileElementId : 'file',		// 上传文件的id注意需要引号
		dataType : 'js', 		//返回值类型，一般设置为json、application/json
		success : function(data, status) {
			alert(data);
		},
		error : function(data, status, e) {
			alert(data);
		}
	});
}

//将表单数据序列化成json对象
$.fn.serializeJSON = function() {  
    var jsonObj = {};  
    var a = this.serializeArray();  
    $.each(a, function() {  
        if (jsonObj[this.name]) {  
            if (!jsonObj[this.name].push) {  
            	jsonObj[this.name] = [ jsonObj[this.name] ];  
            }  
            jsonObj[this.name].push($.trim(this.value) || '');  
        } else {  
        	jsonObj[this.name] = $.trim(this.value) || '';  
        }  
    });  
    return jsonObj; 
}
</script>

<form id="myForm">
	<table>
		<tr>
			<th><input id="title" name="title" type="text"/></th>
			<th>标题</th>
		</tr>
		<tbody>
			<tr>
				<td>
					<input type="file" id="file" />
				</td>
			</tr>
		</tbody>
	</table>
</form>
<div>
	<input type="button" οnclick="submitForm()">
</div>

使用ajaxfileupload.js时，需要注意对于多文件上传的修改，需要将fileElementId的传参改为['fileId_1', 'fileId_2', 'fileId_3']这种数组。

以下为实际项目使用JS：

/**
 * https://github.com/carlcarl/AjaxFileUpload
 */
jQuery.extend({
    createUploadIframe: function(id) {
        //create frame
        var frameId = 'jUploadFrame' + id;
        //