通过AJAX传递图片

Question

基本上，我想在提交表单时通过Ajax传递图像文件，并检索图像并将其作为附件文件发送到电子邮件中：

这是表单：

<form role="form" action="" name="devis" id="devis" method="post" enctype="multipart/form-data" class="form-horizontal">
    <fieldset>
        <div class="form-group">
            <label class="control-label col-md-4" for="societe">Company</label>
            <div class="col-md-8">
                <input type="text" class="form-control input-md col-md-8" name="societe" value="" maxlength="" id="societe">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4" for="message"><span class="required">* </span>Message</label>
            <div class="col-md-8">
                <textarea rows="5" name="message" class="form-control input-md col-md-8" maxlength="" required="" style="resize:none;" id="message"></textarea>
            </div>
        </div>
        <div class="form-group" id="input_file">
            <label class="control-label col-md-4" for="image_input_field">Logo</label>
            <div class="col-md-8">
            <div class="input-group uploaddiv">
                <span class="input-group-btn">
                    <span class="btn btn-default btn-file">
                        Parcourir <input type="file" id="image_input_field" name="file">
                    </span>
                </span>
                <input type="text" class="form-control" readonly="">
            </div>
            </div>
        </div>
    <div class="form-group">
    <div class="form-actions col-md-9 col-md-offset-3 text-right">
        <input type="submit" value="Envoyer" name="" class="btn btn-primary" id="submit">
        <input type="reset" value="Annuler" name="" class="btn btn-default" id="reset">
        </div>
    </div>
    </fieldset>
</form>

我似乎找不到代码中的错误！这是AJAX调用：

jQuery(document).on("click", "#submit", function(e) {
      e.preventDefault();
      var fileInput = document.getElementById('image_input_field');
      var file = fileInput.files[0];
      var formData = new FormData();
      formData.append('file', file);
      // console.log(file);

      var societe = $("input#societe").val();
      var message = $("textarea#message").val();
      jQuery.ajax({
        url: "ajax.php",
        type: "post",
        data: {
           'file': file,
           'module' : 'ajax_data_form',
           'societe': societe,
           'message': message
        },
        cache: false,

        success: function(reponse) {
          if(reponse) {
            alert(reponse);
            // console.log(reponse);
            // jQuery('#devis').trigger("reset");
          } else {
            alert('Erreur');
          }
        }
      });
     });

这里是 ajax.php 的代码：

<?php
if( isset($_POST['module']) && $_POST['module'] == "ajax_data_form" )
{
     var_dump($_FILES);
}

- user3350731

---

无法通过Ajax实现。 - Linga

@ling.s，你可以使用HTML5文件API来实现。 - code-jaff

@code-jaff使用那个API很厉害吗？ - Linga

@ling.s 显然，因为从文件数组中访问该文件。 - code-jaff

您可以在以下网址找到完美的解决方案：https://github.com/kamleshwebtech/upload-image-by-ajax - Kamlesh

Answer 1

$.ajax({
    type: "POST",
    url: pathname,
    data: new FormData($('#devis')[0]),
    processData: false,
    contentType: false,
    success: function (data) {
        $("#divider").html(data);
    }
});

并且可以在$_FILES[]中正常获取文件数据。因为FormData会自动处理ajax请求中的multipart头。

- Karthikeyan Ganesan

---

最好您能解释一下这个方法如何解决问题。 - code-jaff

Answer 2

你可以尝试一下

<script type="text/javascript">
$(document).ready(function() {
$("#submit").click(function() {
  var fileInput = document.getElementById('image_input_field');
  var file = fileInput.files[0];
  var formData = new FormData();
  formData.append('file', file);
  // console.log(file);

  var societe = $("input#societe").val();
  var message = $("textarea#message").val();

      $.ajax({
        url: "ajax.php",
        type: "POST",
        data: "file="+file,
        cache: false,

        success: function(reponse) {
          if(reponse) {
            alert(reponse);

            // console.log(reponse);
            // $('#devis').trigger("reset");
          } else {
            alert('Erreur');
          }
        }
      });
 }); });
</script>

在 ajax.php 文件中，只需编写以下代码：

 echo 'something';

- Punitha Subramani

---

我们无法通过ajax处理文件。 - Linga

每个人都说你不能通过ajax处理文件... 我总是将文件转换为base64字符串，然后通过ajax调用发送它。 在服务器端，您接收字符串并将其写入磁盘。这是可行的，而且足够简单。 - Curious Mind

Answer 3

使用一个名为Jquery Form插件的Jquery插件链接

我建议仅使用jquery提交表单，您可以将任何需要的数据保存在隐藏字段中。

$("#devis").ajaxSubmit(options); 
return false;

你可以在 PHP 页面中轻松获取文件，就像这样

$ImageTempname  = $_FILES['ImageFile']['tmp_name'];
$ImageFilename  = $_FILES['ImageFile']['name'];
$ImageType      = $_FILES['ImageFile']['type'];

等等……

- Yunus Aslam

---

你忘了提到ajaxSubmit是一个jQuery插件。 - baldrs

是的，我也认为可以使用ajaxSubmit。 :) - Majeed

Answer 4

正如您可能已经知道的那样，无法通过ajax调用处理文件上传，一旦HTML5 FILE I/O Api准备就绪并由主要浏览器实现，这将成为可能。

您可以使用jQuery iframe post form插件在iframe中发布数据，以便用户体验类似于ajax调用（页面的部分更新）。

这是链接： https://github.com/dogzworld/iframe-post-form

描述：“此jQuery ajax上传插件创建一个隐藏的iframe，并将表单的目标属性设置为发布到该iframe。当提交表单时，它会被发布（包括文件上传）到隐藏的iframe。最后，插件从iframe收集服务器的响应。”

如上所述，您可以从服务器发送响应并相应地显示网页更新。 必须有演示页面，但目前尚未工作。

您也可以将其用于文件上传。

调用示例：

jQuery('#frmId').iframePostForm({
    json : true,
    post : function () {
        //return true or false
        return true;
    },
    complete : function (response) {
        //complete event
        console.log(response);
    }
});

- Dharmang