使用 jquery 和 ajax 上传图片

Question

我正在尝试使用 ajax 上传照片。

我的输入：

<input type="file" name="defaultPhoto">

我的 jQuery 代码的一部分。

var form = #insertCredentials

var defaultPhoto = $('#' + form + ' ' + '[name = "defaultPhoto"]').prop('files');

我通过 ajax 调用发送 defaultPhoto 到我的 php 以及其他表单输入。

控制台返回以下错误：

TypeError: 'slice' called on an object that does not implement interface Blob.

Answer 1

您无法通过 ajax 发送文件尝试在正常提交的表单目标中使用隐藏的 iframe

<form name="" action="/your_iframe_action_url" taget="hidden_iframe_name">

<input type="file" />
<input type="submit" />
</form>

<iframe name="hidden_iframe_name" style="width:0; height:0" />

在your_iframe_action_url中可以调用javascript父函数来执行事件成功或失败...模拟地下上传

Answer 2

你可以使用document.getElementById('whatever').files;

获取文件然后使用

formdata

通过ajax发送文件。

这里是 example

您还可以使用文件 reader 在加载时显示文件

这里是 filereader

的例子

Answer 3

我已经使用 Dropzone JS 实现了 AJAX 文件上传方式。它会让你的生活变得简单

勾选Dropzone.js Website

您需要做的就是实例化 dropzonejs 对象并设置 options

Dropzone.options.myAwesomeDropzone = {
      paramName: "file", // The name that will be used to transfer the file
      maxFilesize: 2, // MB
      accept: function(file, done) {
        if (file.name == "image.jpg") {
          done("Naha, you don't.");
        }
        else { done(); }
      }
    };

使用 jquery 和 ajax 上传图片

Upload an image by using jquery and ajax

php

ajax

jquery

file-upload