首页>>表单>>jQuery AJAX图片上传，删除(2018-08-23)

jQuery AJAX图片上传，删除

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

 

JavaScript Code
  1. <script type="text/javascript">  
  2.         function showPreview(objFileInput) {  
  3.             hideUploadOption();  
  4.             if (objFileInput.files[0]) {  
  5.                 var fileReader = new FileReader();  
  6.                 fileReader.onload = function (e) {  
  7.                     $("#targetLayer").html('<img src="'+e.target.result+'" width="200px" height="200px" class="upload-preview" />');  
  8.                     $("#targetLayer").css('opacity','0.7');  
  9.                     $(".icon-choose-image").css('opacity','0.5');  
  10.                 }  
  11.                 fileReader.readAsDataURL(objFileInput.files[0]);  
  12.             }  
  13.         }  
  14.         function showUploadOption(){  
  15.             $("#profile-upload-option").css('display','block');  
  16.         }  
  17.   
  18.         function hideUploadOption(){  
  19.             $("#profile-upload-option").css('display','none');  
  20.         }  
  21.   
  22.         function removeProfilePhoto(){  
  23.             hideUploadOption();  
  24.             $("#userImage").val('');  
  25.             $.ajax({  
  26.                 url: "remove.php",  
  27.                 type: "POST",  
  28.                 data:  new FormData(this),  
  29.                 beforeSend: function(){$("#body-overlay").show();},  
  30.                 contentType: false,  
  31.                 processData:false,  
  32.                 success: function(data)  
  33.                 {                 
  34.                 $("#targetLayer").html('');  
  35.                 setInterval(function() {$("#body-overlay").hide(); },500);  
  36.                 },  
  37.                 error: function()   
  38.                 {  
  39.                 }             
  40.             });  
  41.         }  
  42.         $(document).ready(function (e) {  
  43.             $("#uploadForm").on('submit',(function(e) {  
  44.                 e.preventDefault();  
  45.                 $.ajax({  
  46.                     url: "upload.php",  
  47.                     type: "POST",  
  48.                     data:  new FormData(this),  
  49.                     beforeSend: function(){$("#body-overlay").show();},  
  50.                     contentType: false,  
  51.                     processData:false,  
  52.                     success: function(data)  
  53.                     {  
  54.                     $("#targetLayer").css('opacity','1');  
  55.                     setInterval(function() {$("#body-overlay").hide(); },500);  
  56.                     },  
  57.                     error: function()   
  58.                     {  
  59.                     }             
  60.                });  
  61.             }));  
  62.         });  
  63.         </script>  

 


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