上傳文件組件ajaxFileUpload

1.options參數說明:

1、url            上傳處理程序地址。
2、fileElementId      需要上傳的文件域的ID,即的ID。
3、secureuri        是否啓用安全提交,默認爲false。
4、dataType         服務器返回的數據類型。可以爲xml,script,json,html。如果不填寫,jQuery會自動判斷。
5、success         提交成功後自動執行的處理函數,參數data就是服務器返回的數據。
6、error          提交失敗自動執行的處理函數。
7、data            自定義參數。這個東西比較有用,當有數據是與上傳的圖片相關的時候,這個東西就要用到了。
8、type             當要提交自定義參數時,這個參數要設置成post

2.上傳彈出框和上傳摁扭

<div id="uploadAppendixPop" class="pop"  style="display:none;">
    <table class="tableInput" id="uploadAppendixModel">
        <tbody>
	        <tr>
	            <td class="bgtd">上傳附件路徑</td>
	            <td>
	                <input type="file" id="uploadAppendixFileRoad" name="uploadAppendixFileRoad" >
	            </td>
	        </tr>
        </tbody>
    </table>
</div>

<button class="btn" οnclick="uploadAppendix('xxxx')">上傳附件</button>

3.上傳js(dataType通常設置爲json,後端傳上來時設置resp.setContentType("application/json; charset=UTF-8"),前端轉爲json:var data =  $.parseJSON(json);

function uploadAppendix(Id) {
	$('#uploadAppendixFileRoad').val('');
	fileIds = {};
	var index = layer.open({
		type: 1,
		title: '上傳文件',
		skin: 'layui-layer-rim',
		area: ['520px', '180px'],
		content: $('#uploadAppendixPop'),
		btn: ['確定', '取消'],
		btnAlign: 'c',
		btn1: function () {
			submitAppendixForm( applyId, function(){
				layer.close(index);
			});
		},
		btn2: function () {

		}
	});
}
/**
 * 提交上傳文件
 * @param entityId
 * @Param entityCode 
 */
function submitAppendixForm(Id, callback) {
	var file = $("#uploadAppendixFileRoad").val();
	var fileName = file.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi, "$1"); // 獲取文件名,不帶後綴
	if (fileName.length == 0) {
		layer.msg("附件文件名稱不允許爲空 !");
		return false;
	}
	if (filaNameSpecialCode(fileName)) {
		layer.msg("附件文件名稱不能包含特殊字符!");
		return false;
	}
	if (fileName.length > 50) {
		layer.msg("附件文件名稱長度不能超過50!");
		return false;
	}

	if (!isEmpty(fileName)) {
		$.ajaxFileUpload({
			url: "/Servlet?method=methodName&Id=" + Id,
			type: 'post',
			dataType : 'json',
			secureuri: false,
			fileElementId: 'uploadAppendixFileRoad',// file標籤的id
			success: function (json) {
				var data =  $.parseJSON(json);
				if (data.result == "101") {
					layer.alert(data.message);
				} else {
					layer.alert("上傳成功");
					setTimeout(function(){
						callback();
					},200);
				}
			},
			error: function () {
				layer.alert("上傳附件失敗");
			}
		});
	} else {
		layer.alert("上傳文件不能爲空");
		return;
	}
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章