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

您还可以使用文件阅读器显示已加载的文件

这是filereader

的示例

Answer 3

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

检查 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上传图像

3 个答案: