Question

jquery ajaxfileupload可以预览吗

Answer 1

使用ajaxfileupload对文件进行上传，上传完成后显示在该页上，即可以预览，想要实现该效果，只需要在上传成功之后服务端返回该图片在服务端的路径地址给前端，在ajax的success回调函数中，动态的设置页面上img节点的src属性为该地址路径即可。具体示例代码可以参考：

Html

<div class="uploadPicture">  
       <img id="imgHead" src="" width="106" height="122" alt="头像">   
       <input type="file" onchange="uploadHead();" id="basicInfoHead" style="display:none;"  
        name="basicInfoHead" />  
      <input type="hidden" id="basicHeadUrl" >  
       <a href="#basicInfo" id="uploadBasicInfoHead" >上传头像</a>  
      </div>

Javascript

//上传头像，触发click方法  
    $('#uploadBasicInfoHead').on('click',function(){  
     $('#basicInfoHead').click();  
    });  
  
function uploadHead(){  
  $.ajaxFileUpload({  
      url:"${pageContext.request.contextPath}/profile/uploadBasicHead",//需要链接到服务器地址   
      secureuri:false,  
      fileElementId:"basicInfoHead",//文件选择框的id属性  
      dataType: 'json',   //json  
      success: function (data) {  
         $("#imgHead").attr("src","${pageContext.request.contextPath}/profile/readImage?imagePath="+data.imagePath);  
        $('#basicHeadUrl').val(data.imagePath);  
      },error:function(XMLHttpRequest, textStatus, errorThrown){  
     alert('上传失败！');  
   }  
  });  
};

备注：后端需要对应的返回上传成功的图片的url路径。