jquery ajax方式上传图片页面无刷新浏览

最新推荐文章于 2022-10-30 08:56:56 发布

原创最新推荐文章于 2022-10-30 08:56:56 发布 · 542 阅读

0 ·

CC 4.0 BY-SA版权

下载jquery插件：http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

在JSP页面中导入ajaxfileupload.js，

<form method="post" action="<%=basePath %>vcardmain/update.action" id="form1" enctype ="multipart/form-data">

<div class="img-box"><img src="<%=basePath %>${oVcardMain.headImage!=''? oVcardMain.headImage : 'images/vcardcolumn/p.jpg'}" id="viewImg" width="90px" height="120px"></div>
      <div class="file-box">
        <div class="text">头像上传:</div>
        <input type="button" class="btn" value="选择文件" id="imgBtn"/><br>
        <input name="textfield" type="text" class="txt" id="textfield" value="未选择文件" readonly="readonly" />
        <input type="file" name ="headImage" class="file" accept="image/*" id="fileField" size="28" value="${oVcardMain.headImage}" onchange="document.getElementById('textfield').value=this.value;ajaxFileUpload();" />
      </div>

</form>

$.ajaxFileUpload
  (
   {
    url:'<%=basePath %>vcardcolumn/ajaxUplaodImg.action?os='+os+'tmp='+Math.random(),
    secureuri:false,
    fileElementId:'fileField',
    dataType: 'text',
    success: function (data, status)
    {
    var result = data.substring(59,data.indexOf('</pre>'));
     if(result == 'error'){
       alert("请重新上传");
       $("#imgBtn").val("选择文件");
       $("#subtn").attr("disabled",false);
     }else{
       var viewImg = document.getElementById("viewImg");
       viewImg.src = '<%=basePath %>'+result;
       $('#headImgPath').val(viewImg.src);
       $("#imgBtn").val("选择文件");
       $("#subtn").attr("disabled",false);
     }
    },
    error: function (data, status, e)
    {
     alert("请重新选择");
     $("#imgBtn").val("选择文件");
     $("#subtn").attr("disabled",false);
    }
   }
  )

后台用struts2上传接收图片