更改文件上傳

Question

我想通過jQuery的AJAX功能上傳配置文件圖片。 這意味着，當輸入[type =「file」]更改時，我希望它實際發佈表單並將數據發送到我的PHP腳本。我的代碼現在的問題是：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#profileUpload").on('change', 'input[name="profilepic"]', function(){ 

    $("#profileUpload input[type='file']").attr('disabled','disabled'); 
    $("#picLoader").css('display','block'); 

    $.ajax({ 
     type: "POST", 
     dataType: "json", 
     url: "edit/uploadProfilePicture", // URL of the Perl script 
     data: {profile_pic: $("input[name='profilepic']").val()}, 

     // script call was successful 
     // data contains the JSON values returned by the Perl script 
     success: function(data){ 
      if (data.error) { 

      } else { 

      } 
      $("#picLoader").css('display','none'); 
     } // success 
    }); // ajax 

    return false; 
}); 
}); 
</script> 
<form action="" method="post" class="form-horizontal" id="profileUpload" role="form" enctype="multipart/form-data"> 
    <div class="form-group profilepic"> 
     <label for="create_Profile" class="col-lg-3 control-label">Profilbillede</label> 
     <div class="col-lg-9"> 
      <div style="position: relative; display: block; float: left;"> 
      <?php if(empty($profile_pic)): ?> 
       <div style="z-index:10;"> 
        <img src="<?= BASE_HTTP_PATH; ?>/public/img/default/no-profile-pic.png" id="profPic" style="width: 63px; float: left; margin: 0 10px 0 0;" /> 
       </div> 
      <?php else: ?> 
       <div style="z-index:10;"> 
        <img src="<?= BASE_HTTP_PATH; ?>/public/img/default/nopic.png" id="profPic" style="width: 63px; float: left; margin: 0 10px 0 0;" /> 
       </div> 
      <?php endif; ?> 
       <div id="picLoader" style="position: relative; display: none; width: 63px; height: 68px; z-index: 100;"> 
        <div style="position: absolute; top: 0; opacity: 0.3; background: #dfdfdf; width: 63px; height: 68px; z-index: 100;">&nbsp;</div> 
        <img src="<?= BASE_HTTP_PATH; ?>/public/img/default/ajax-loader.gif" style="position: absolute; top: 28px; left: 24px; z-index: 101;"> 
       </div> 
      </div> 
      <div style="position: relative; display: block; float: left;"> 
       <input type="file" id="create_Profile" name="profilepic" placeholder="Vælg profilbillede" style="float: left;" /> 
      </div> 
      <br style="clear: both;"> 
     </div> 
    </div> 
</form> 

的問題是，我不知道如何使形式的孩子張貼的形式與「火」的AJAX請求正確。誰能幫忙？

感謝提前:)

Answer 1

只要把聯播在你ajaxFileUpload功能的更迭最後一個條目和錯誤處理程序中的$ .ajaxFileUpload通話，這將在隨後點擊運行。

所以它看起來像這樣

//uploader event 
$('#uploadedfile').change(function(){ 
    ajaxFileUpload(); 
}); 

//upload file 
function ajaxFileUpload(){ 
    $.ajaxFileUpload({ 
    url:'upload.php', 
    secureuri:false, 
    fileElementId:'uploadedfile', 
    dataType: 'json', 
    success: function(data,status){ 
     if(typeof(data.error) != 'undefined'){ 
      if(data.error){ 
       //print error 
       alert(data.error); 
      }else{ 
       //clear 
       $('#img img').attr('src',url+'cache/'+data.msg); 
      } 
     } 
     $('#uploadedfile').change(function(){ 
      ajaxFileUpload(); 
     }); 
    }, 
    error: function(data,status,e){ 
     //print error 
     alert(e); 
     $('#uploadedfile').change(function(){ 
      ajaxFileUpload(); 
     }); 
    } 
    });