首页>>表单>>jQuery AJAX 上传图片(2018-08-20)

jQuery AJAX 上传图片

jQuery AJAX 上传图片
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2. function showPreview(objFileInput) {  
  3.     if (objFileInput.files[0]) {  
  4.         var fileReader = new FileReader();  
  5.         fileReader.onload = function (e) {  
  6.             $("#targetLayer").html('<img src="'+e.target.result+'" width="200px" height="200px" class="upload-preview" />');  
  7.             $("#targetLayer").css('opacity','0.7');  
  8.             $(".icon-choose-image").css('opacity','0.5');  
  9.         }  
  10.         fileReader.readAsDataURL(objFileInput.files[0]);  
  11.     }  
  12. }  
  13.   
  14. $(document).ready(function (e) {  
  15.     $("#uploadForm").on('submit',(function(e) {  
  16.         e.preventDefault();  
  17.         $.ajax({  
  18.             url: "upload.php",  
  19.             type: "POST",  
  20.             data:  new FormData(this),  
  21.             beforeSend: function(){$("#body-overlay").show();},  
  22.             contentType: false,  
  23.             processData:false,  
  24.             success: function(data)  
  25.             {  
  26.             $("#targetLayer").html(data);  
  27.             $("#targetLayer").css('opacity','1');  
  28.             setInterval(function() {$("#body-overlay").hide(); },500);  
  29.             },  
  30.             error: function()   
  31.             {  
  32.             }             
  33.        });  
  34.     }));  
  35. });  
  36. </script>  

 

XML/HTML Code
  1. <div id="body-overlay"><div><img src="loading.gif" width="64px" height="64px"/></div></div>  
  2. <div class="bgColor">  
  3. <form id="uploadForm" action="upload.php" method="post">  
  4. <div id="targetOuter">  
  5.     <div id="targetLayer"></div>  
  6.     <img src="photo.png"  class="icon-choose-image" />  
  7.     <div class="icon-choose-image" >  
  8.     <input name="userImage" id="userImage" type="file" class="inputFile" onChange="showPreview(this);" />  
  9.     </div>  
  10. </div>  
  11. <div>  
  12. <input type="submit" value="Upload Photo" class="btnSubmit" />  
  13. </form>  
  14. </div>  
  15. </div>  

 


原文地址:http://www.freejs.net/article_biaodan_674.html