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