jQuery文件上傳插件不起作用

我正在使用jQuery文件上傳插件。在這裏，我試圖更新現有的圖像：jQuery文件上傳插件不起作用

$(document).ready(function() { 
    var options = { 
     target: '#notification_img', // target element(s) to be updated with server response 
     beforeSubmit: beforeSubmit, // pre-submit callback 
     success: afterSuccess, // post-submit callback 
     resetForm: true  // reset the form after successful submit 
    }; 
    $('#MyImg').submit(function() {   
     $(this).ajaxSubmit(options);    
     // always return false to prevent standard browser submit and page navigation 
     return false; 
    });

HTML表單

<form action="img_up.php" method="post" enctype="multipart/form-data" id="MyImg"> 
     <label>Upload Photo</label><br> 
     <input class="inp" id="photo-up" type="file" placeholder="Photo" name="photo-up"/><br/> 
     <input class="btn" type="submit" id="update-img-btn" value="Update" /><br/> 
     <img src="images/ajax-loader.gif" id="loading-img" style="display:none; text-align:center;" alt="Please Wait"/> 

    </form>

我的問題是這樣的頁面重定向到img_up.php文件，當我提交表單。但是這並不是假設我正在使用AJAX。該圖像沒有上傳到目錄中。我已經包含了所有必需的JavaScript文件。與此

$('#update-img-btn').click(function(e) { 
e.preventDefault();   
     $('#MyImg').ajaxSubmit(options);    
    // // always return false to prevent standard browser submit and page navigation 
      return false; 
    });

... 
$('#MyImg').submit(function(event) { 
     $.ajax({ 
      type  : 'POST', // define the type of HTTP verb we want to use (POST for our form) 
      url   : 'img_up.php', // the url where we want to POST     
     }) 

     // stop the form from submitting the normal way and refreshing the page 
     event.preventDefault();

來源

2015-05-05 parvez ron

您在控制檯中遇到什麼錯誤？這一切似乎爲我工作得很好（http://jsfiddle.net/putvande/aqjbLvzr/）你定義'beforeSubmit'和'afterSuccess'？ – putvande

是的，我定義了這些功能。此代碼應該工作正常，但不適合我。 –

-1

刪除img_up.php並添加到您的AJAX使用此代碼

$sourcePath = $_FILES['photo-up']['tmp_name'];  // Storing source path of the file in a variable 
$targetPath = "upload/".$_FILES['photo-up']['name']; // Target path where file is to be stored 
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file

您可以搜索谷歌的教程，如upload file using ajax php，這裏有幾個鏈接，你可以檢查

http://www.formget.com/ajax-image-upload-php/

http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

http://blog.teamtreehouse.com/uploading-files-ajax

來源

2015-05-05 16:33:18 FeedTheWeb

因此，我要把我的PHP頁面鏈接？ –

無法正常工作。我想如何在這裏提交我的圖像數據？ –

可能這是有用的：http://stackoverflow.com/questions/24168040/upload-multiple-files-with-php-and-jquery/24168617#24168617 –

改變你的函數對於在你的目錄上傳文件：從形式的行動，

來源

2015-05-05 16:36:13 tzafar

爲什麼downvote我的答案，請解釋 – tzafar

現在它已停止重定向到該PHP文件，但它不工作。 –

'return false'已停止表單重新加載頁面。 – putvande

確保目標存在其他加載它的成功回調目標

var options = { 
    beforeSubmit: beforeSubmit, // pre-submit callback 
    success: afterSuccess, // post-submit callback 
    resetForm: true  // reset the form after successful submit 
}; 

$('#MyImg').submit(function() {   
    $(this).ajaxSubmit(options);    
    // always return false to prevent standard browser submit and page navigation 
    return false; 
}); 

function afterSuccess(responseText, statusText, xhr, $form) { 
    $('#notification_img').html(responseText); 
}

另外，請確保JavaScript文件已使用jquer正確加載y 您的代碼看起來不錯

來源

2015-05-05 17:30:09

jQuery文件上傳插件不起作用

回答

相關問題