uploadify ajax插件

 

下载uploadify:http://www.uploadify.com/

 

需要的文件:

uploadify.css

jquery.uploadify.v2.1.0.min.js

swfobject.js

jquery-1.4.2.js

 

 

 

<tr>
				<td>学生照片:</td>
				<td>
					<span id="fileSpan"><input type="file" name="stuPicture" id="stuPicture"/></span>
					<span id="imgSpan" style="display:none"></span>
					<input type="hidden" name="student.stuPhoto" id="stuPhoto"/>
				</td>
				
			</tr>

 

 

 

$(document).ready(function(){
	$("#stuPicture").uploadify({
		'uploader'     : 'jQuery/uploadify/scripts/uploadify.swf',//设置uploadify路径
		'script'       : 'Student_doAjaxUpload.action',//请求响应的Action
		'cancelImg'    : 'jQuery/uploadify/cancel.png',//设置  取消按钮图片的路径
		'folder'       : '',//设置上传文件后保存的路径
		'fileDataName' : 'stuPicture',//上传文件的文件
		'auto'         : true,//设置是否自动上传
		'multi'        : false,//设置是否多文件上传
		'onComplete'   :function(event,queueId,fileObj,response){
			//因为传回的数据是字符串,通过eval方法将其转化成json格式
			var jsonObject=eval('('+response+')');
			var filePath=jsonObject.stuFile;//得到回调的图片的路径
			var img=$("<img/>").attr("src",filePath+"?now="+new Date()).attr("width","100").attr("height","50");
			$("#imgSpan").append(img).show();
			$("#fileSpan").hide();
			$("#stuPhoto").val(filePath);
		},
		'onError'      :function(event,queueID,fileObj,errorObj){
			alert("Ajax上传图片出错!请重新试过!");
		}
		
	});	
	
});

 

 

 

评论

3 楼 yangpanwww 2011-04-24  

wuhaidong 写道

yangpanwww 写道

后台处理代码也给出来啊。。。

  不然。。不知道怎么接收~~~~~~~~

后台跟Struts处理图片一致啊，你看看Struts怎么处理的吧

 

恩。。谢谢。。测试成功了！

2 楼 wuhaidong 2011-04-18  

yangpanwww 写道

后台处理代码也给出来啊。。。

  不然。。不知道怎么接收~~~~~~~~

后台跟Struts处理图片一致啊，你看看Struts怎么处理的吧

1 楼 yangpanwww 2011-04-18  

后台处理代码也给出来啊。。。

  不然。。不知道怎么接收~~~~~~~~