uploadify ajax插件

最新推荐文章于 2025-11-26 18:40:17 发布

原创最新推荐文章于 2025-11-26 18:40:17 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #jQuery #json #CSS #ViewUI

下载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上传图片出错!请重新试过!");
		}
		
	});	
	
});