Question

我试图提交一个通过ajax输入文件的表单。我有一些重要的事情需要发生。

文件输入应该由按钮（完成）
选择（完成）文件后，应提交表单
页面不应该刷新，我应该能够以标准的ajax方式检查结果。

我自己试图这样做，但我发现的任何东西都不符合我的需要。

用户需要看到这样的按钮，而不是标准的表单输入：

我使用了以下代码：

        <form id="uploadProfilePictureForm" action="" method="post" enctype="multipart/form-data" style="display: none">
            <input name="uploadProfilePicture" id="uploadProfilePicture" type="file" onchange="this.form.submit()" style="display: none;"/>
        </form>
        <a id="changeProfileButtonIcon" class="btn btn-info float-right mx-0 my-0">Change (in progress)</a>


          <script>
            $("#changeProfileButtonIcon").on('click', function(e){
            e.preventDefault();
            $("#uploadProfilePicture:hidden").trigger('click');
             });
          </script>

这会正确打开输入，如果我将操作设置为我的上传页面，则在关闭选择对话框时上传图像，然后我只看到带有成功消息的白页（正如预期的那样）

因为我不想刷新页面，所以我试图通过jQuery来做到这一点：

$("#uploadProfilePictureForm").on('submit',(function(e) {
            e.preventDefault();
            $.ajax({
                url: "/helpers/upload_image.php", // Url to which the request is send
                type: "POST",             // Type of request to be send, called as method
                data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                contentType: false,       // The content type used when sending data to the server.
                cache: false,             // To unable request pages to be cached
                processData: false,        // To send DOMDocument or non processed data file it is set to false
                success: function (data)   // A function to be called if request succeeds
                {
                    var a = 1;
                }
            });
        }));

我在“preventDefault”行上放置了一个断点，并且在“var a = 1”上也没有触发这些断点，页面只是刷新。

任何人都可以帮助我吗？

由于

Answer 1

如果你所做的只是上传（a）档案，你就不需要表格。你有一个按钮触发点击另一个按钮触发点击第三件事的方法过于复杂。你不应该将事件属性与事件监听器混合。

＆＃13;

$("#realBtn").change(function(){
  var formData = new FormData();
  for(var i=this.files.length; i--;)
    formData.append('uploadProfilePicture[]', this.files[i], this.files[i].name);
  $.ajax({
      url: "/helpers/upload_image.php",
      type: "POST", 
      data: formData,
      contentType: false,
      cache: false,
      processData: false,
      success: function (data){
          console.log("upload complete");
      }
  });
});

// Trigger the real file upload button
$("#fakeBtn").click(()=>$("#realBtn").click());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="realBtn" type="file" style="display: none;" />
<input id="fakeBtn" type="button" value='click to upload stuff'/>

＆＃13;

那就是说，你应该利用我为你写的所有脏工作的许多jQuery插件之一，比如我写的this one。

你有很多理由应该使用它......

它处理上传部分，
可让您在上传时显示图片预览
它可以让您看到上传进度，
支持拖放，
它只能允许某种类型的文件（如图像）
等等。

＆＃13;

$("#fileBtn").fileUpload({
  url: "/path/to/upload.php",
  accept: "image/gif, image/png, image/jpeg, .png, .gif, .jpg",
  change: function(){
    $("#preview").html("Loading...");
    $("#fileBtn").fileUpload("getDataURI", function(dataURI){
      $("#preview").html("<b>Your image: </b><br><img src='"+dataURI+"' />");
    }); 
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/Pamblam/fileUpload/master/fileUpload.js"></script>

<div id=preview></div>
<button id=fileBtn>click me</button>

＆＃13;

Ajax文件上传

1 个答案: