我正在开发一个应用程序(在Node.js中,这与这种情况无关),它允许用户上传图像.使用带有input(type ="file")字段的表单可以正常工作.
但是,我想要的是能够使用HTML5拖放来上传图像.就我而言,可以将图像拖到客户端,图像缩略图显示在div中.但是我真的需要一些帮助才能使文件上传工作.
问题是我想使用我现在正在使用的表单,并且(不知何故)将文件的路径传递给输入字段,即流程将完全像现在一样工作,而不是通过浏览选择文件我想通过拖放将它附加到输入字段.
在下面用于拖放的js代码中,拖动到客户端的文件存储在变量"file"中,我可以使用"file.name","file.type"和"file.size"与之前使用表单完全相同的方式.但是,我无法访问文件"path"(file.path),这使得无法访问文件服务器端进行上传,就像之前一样.
问题是,在将文件拖到客户端后,是否可以将文件对象传递给输入字段,以便我可以单击"提交"并上传文件？如果是这样,怎么办呢？
提前致谢!
Dropbox以及我用于文件上传的表单:
<div id='upload'>
<article>
<div id='holder'>
<p id='status'>File API and FileReader API not supported</p>
</div>
</article>
<form method='post' enctype='multipart/form-data' action='/file-upload'>
<p>
<input type='file' name='thumbnail'>
</p>
<p>
<input type='submit'>
</p>
</form>
</div>
拖放代码:
uploadImage: function(){
var holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'File API & FileReader available';
}
holder.ondragover = function () { this.className = 'hover'; return …在我的代码中，我执行以下操作（非常简化）：
class AddOrSelectAddress {
static body; // <-- Error
static async open() {
await $.get(basePath + 'Manage/AddOrSelectAddress', null, result => {
this.body = document.createElement('div');
this.body.innerHTML = result;
});
// ...
}
static someOtherMethod() {
// do something with body
}
}
我的代码在 Chrome 中运行良好。但是，Firefox 抱怨第二行代码中的错误：
语法错误：错误的方法定义
我对基于类的 JavaScript 编程比较陌生。我在这里做错了什么？
JavaScript中的静态变量并没有真正帮助我，因为它主要使用旧语法。