jquery ajax上传文件

最新推荐文章于 2025-12-05 11:24:16 发布

原创最新推荐文章于 2025-12-05 11:24:16 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery #ViewUI

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何利用AjaxUpload插件实现网页中的文件上传功能。具体步骤包括：页面引入AjaxUpload.js文件，设置隐藏的文件输入框，创建触发上传的链接，并通过jQuery为触发元素注册事件监听器来启动上传过程。完成上传后，服务器返回文件ID，前端据此构建展示项并提供删除选项。

1.页面引入

<script type="text/javascript" src=/js/ajaxupload.js' ></script>

2.页面加入

			<input type="file" name="attachment" style="display: none;">
			<a href="javascript:void(0);" id="fileUploadProxy">增加附件</a>

3.给指定Id注册事件

 	
jQuery(function(){
	var fileUploadProxy = jQuery('#fileUploadProxy');
	var themeImagesPath = jQuery('input[name="themeImagesPath"]').val();
	var taskName = jQuery('input[name="taskNameHid"]').val();
	var uploadAttachmentUrl = jQuery('input[name="uploadAttachmentUrl"]').val();
	var downloadAttachmentUrl = jQuery('input[name="downloadAttachmentUrlHid"]').val();
	if (fileUploadProxy.length > 0) {
		new AjaxUpload(fileUploadProxy, {
			action : uploadAttachmentUrl,//上传的URL
			name : 'attachment',//file 框的name
			onSubmit : function(file, ext) {
				//fileUploadProxy.disable();
				
			}, onComplete : function(file, response) {
				var attachmentId = response;
				var fileExt = file.substring(file.indexOf('.') + 1);
				var attachmentTr = '<tr>';
				attachmentTr += '<td class="yj_t_2">';
				attachmentTr += taskName;
				attachmentTr += '</td>';
				attachmentTr += '<td class="fj_mc">';
				attachmentTr += '<img align="left" border="0" src="'+ themeImagesPath+'/document_library/'+fileExt+'.png" />';
				attachmentTr += '&nbsp';
				attachmentTr += '<a href="'+ downloadAttachmentUrl + '&attachmentId='+ attachmentId + '">'+ file +'</a>';
				attachmentTr += '</td>';
				attachmentTr += '<td>';
				attachmentTr += '<input type="hidden" value="'+ attachmentId +'"/>';
				attachmentTr += '<img class="removeAttachmentImg" src="/images/close.png">';
				attachmentTr += '</td>';
				attachmentTr += '</tr>';
				jQuery('.task_attachment_list').append(attachmentTr);
				//fileUploadProxy.enable();
				jQuery('.removeAttachmentImg').bind('click', function(){
					var attachmentUrl = jQuery('input[name="deleteAattachmentUrlHid"]').val();
					var attachmentId = jQuery(this).prev().val();
					jQuery(this).attr('id', 'removeImg');
					jQuery.get(attachmentUrl,{attachmentId: attachmentId}, function(data){
						if (data == 'success') {
							jQuery('#removeImg').parent().parent().remove();
						} else {
							alert('delete faild !');
						}
					});
				});
			}
		});
	}
});