jQuery文件上传插件无法正常工作

I am working with jQuery file upload plugin. Here, I tried to update an existing image:

我正在使用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

<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>

My problem is this page is redirecting to the img_up.php file when I am submitting the form. But this is not suppose to happen as I am using AJAX. The image is not uploading in to the directory. I have included all the required JavaScript files.

我的问题是,当我提交表单时,此页面将重定向到img_up.php文件。但这并不是因为我正在使用AJAX。图像未上传到目录中。我已经包含了所有必需的JavaScript文件。

3 个解决方案

#1

change your function with this

用这个改变你的功能

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

For file to be uploaded in the directory you have to use this code

要将文件上载到目录中,您必须使用此代码

$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

you can search google for tutorials like upload file using ajax php, here are the few links which you can check

你可以使用ajax php搜索google上传文件等教程,这里有几个你可以检查的链接

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

#2

Be sure the target exists else load it to target in the success callback

确保目标存在,否则将其加载到成功回调中的目标

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);
}

Also be sure that the javascript files are loaded properly with jquery Your code looks ok

还要确保使用jquery正确加载javascript文件您的代码看起来没问题

#3

remove img_up.php from the form action, and add this to your ajax:

从表单操作中删除img_up.php,并将其添加到您的ajax:

...  
$('#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();

#1