笔记:
下面的答案和评论反映了 2009 年旧版浏览器的状态。现在,您实际上可以在 2017 年使用 JavaScript 动态/编程地设置文件输入元素的值。
有关详细信息以及演示,请参阅此问题中的答案:
如何以编程方式设置文件输入值(即:拖放文件时)?
我正在尝试实现使用 Jquery 上传图像的拖放功能。
这是我的代码:
上传.html
<form id ="image_upload_form" action="" method="post" enctype="multipart/form-data">
<input id="id_image" type="file" name="image">
<input type="submit" value="Upload" />
</form>
<div id="drop_field"></div>
image_upload.js
$(document).ready(function() {
var drop_field = $("#drop_field");
drop_field.bind('dragover', file_drag_over);
drop_field.bind('drop', file_select);
});
function file_select(event) {
event.stopPropagation();
event.preventDefault();
var file = event.originalEvent.dataTransfer.files [0];
$("#id_image").val(file);
}
function file_drag_over(event) {
event.stopPropagation();
event.preventDefault();
event.originalEvent.dataTransfer.dropEffect = "copy";
}
一切正常,除了当我将图像文件放到字段上时,它给了我一个安全错误:
SecurityError: The operation is insecure.
this.value = val;
我猜这是因为我正在尝试修改文件输入字段的“值”属性。在不出现此安全错误的情况下上传文件的正确方法是什么?
谢谢!!