Question

我知道如何通过ajax上传图像，但我想通过jQuery步骤上传图像。我尝试了多种方法，但它并没有起作用。如果有人这样做，请帮助我。感谢

HTML

<input type="file" style="background-color: #2184b3; color: #fff;" class="btn btn-default" name="upload_doc" id="upload_doc" title="Search for a file to add">

的jQuery

if(currentIndex == 0)
                    { 
                        var upload_doc = $("#upload_doc").val();


                        event.preventDefault();
                        $.ajax({
                          async: false,
                          url: myUrl,
                          dataType: 'json',
                          type: 'POST',
                          cache: false,
                            contentType: false,
                            processData: false,
                          data : {  upload_doc : upload_doc, step1 : step1},
                          success: function(response) {
                            console.log(response);
                          }

Answer 1

按照这种方式上传图片，这样就不需要HTML form。

将此代码添加到 mainpage.php

<input type="file" name="upload_doc" id="upload_doc" title="Search for a file to add"/>
<input id="uploadImage" type="button" value="Upload Image" name="upload"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
 <script type="text/javascript">
    jQuery.noConflict();
    jQuery('#uploadImage').on("click", function (e) {
        var uploadedFile = new FormData();
        uploadedFile.append('upload_doc', upload_doc.files[0]);
        jQuery.ajax({
          url: 'lab1.php',
          type: 'POST',
          processData: false, // important
          contentType: false, // important
          dataType : 'json',
          data: uploadedFile
        });
    });
</script>

然后为 upload.php

添加此内容

<?php
    // check record array
    print_r($_FILES);
    move_uploaded_file($_FILES['upload_doc']['tmp_name'], $_FILES['upload_doc']['name']);
?>

Answer 2

根据您的评论，

实际上，我在上传图片时也提交了很多值。所以点击下一个我发送包括图像在内的很多数据。休息数据很好，只有图像。

如果您通过AJAX上传文件以及其他输入值，请使用FormData对象。但请记住，旧浏览器不支持FormData对象，FormData支持从以下桌面浏览器版本开始：IE 10 +，Firefox 4.0 +，Chrome 7 +，Safari 5 +，Opera 12 +。

所以你的jQuery应该是这样的：

if(currentIndex == 0){
    event.preventDefault();
    var formData = new FormData($('form')[0]);
    $.ajax({
        async: false,
        url: myUrl,
        dataType: 'json',
        type: 'POST',
        cache: false,
        contentType: false,
        processData: false,
        data : formData,
        success: function(response) {
            console.log(response);
        }
    });
}

Answer 3

首先在ajax调用中包含成功和错误功能，然后检查它是否给您错误或什么提示？您可以使用jquery.form.js插件通过ajax将图像上传到服务器。

$(document).ready(function (e) {
    $('#imageUploadForm').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));

    $("#ImageBrowse").on("change", function() {
        $("#imageUploadForm").submit();
    });
});

Answer 4

首先在ajax调用中包含成功和错误功能，然后检查它是否给您错误或什么提示？您可以使用jquery.form.js插件通过ajax将图像上传到服务器。

<form action="" name="imageUploadForm" id="imageUploadForm" method="post" enctype="multipart/form-data">
<input type="file" style="background-color: #2184b3; color: #fff;" class="btn btn-default" name="upload_doc" id="upload_doc" title="Search for a file to add">
</form>
<script type="text/javascript">
    $(document).ready(function (e) {
        $('#imageUploadForm').on('submit',(function(e) {
            e.preventDefault();
            var formData = new FormData(this);

            $.ajax({
                type:'POST',
                url: $(this).attr('action'),
                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data){
                    console.log("success");
                    console.log(data);
                },
                error: function(data){
                    console.log("error");
                    console.log(data);
                }
            });
        }));

        $("#upload_doc").on("change", function() {
            $("#imageUploadForm").submit();
        });
    });
</script>

如何通过jQuery步骤上传图像

4 个答案: