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 += ' ';
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 !');
}
});
});
}
});
}
});
分享到:
相关推荐
jQuery Ajax上传文件,无需刷新页面
实现Jquery Ajax 三种方案进行前后台数据传输,界面内容传值及返回值实例!
jquery实现ajax上传文件asp.net版
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,接下来通过本文给大家介绍jquery ajax 上传文件处理方式,需要的朋友一起看看吧
ajax异步上传文件插件,ajax异步上传文件插件,ajax异步上传文件插件,无奈要50个字
ajax+jquery+ashx实现上传文件 简单易用,直接调用
jquery+ajax文件上传 已做修改可传入其他表单参数
Jquery ajax 上传一个或多个文件,简单,易用(做成了jquery的插件)
struts2+jquery+ajax实现了文件的异步上传,的MyEclipse编写的简单项目
jquery ajax上传文件格式、图片
jquery+ajax+json 上传文件并解析 jquery+ajax+json 上传文件并解析
在Web API中使用jQuery AJAX实现文件上传的例子
JQuery实现ajax上传文件示例源码
JQuery实现ajax上传文件示例源码 源码描述: url用来指定后台处理的程序,fileElementId指的是文件选择框的ID,dataType用来指定返回的数据格式,支持xml、script、json和html。 返回的json的格式最简单:{error:'...
用jquery实现ajax上传文件php版
搭建springMvc框架,与jQuery,ajax相结合实现单个文件和多个文件的上传功能
jQ AJAX文件上传表单 jQuery AJAX文件上传表单代码下载.zip
asp.net+query实现文件ajax上传。