将图像拖放到输入字段时无法触发预览
将图像拖放到输入字段时无法触发预览
提问于 2018-06-02 14:51:42
我有一个将图片上传到Cloudinary的下拉框，它工作得很好，但当图片被拖放时，我不能触发预览功能。
这是HTML代码：
<div class="card text-muted">
<label id="upload" for="dropboxInput" class="card-block text-muted">
<input type="file" name="file" data-url="CLOUDINARY_URL"
data-form-data="{CLOUDINARY STUFF}"
data-cloudinary-field="file" class="cloudinary-fileupload"
multiple="multiple" style="display:none" id="dropboxInput">
</label>
</div>以下是触发该函数的代码，在单击drop box后选择图像时，该函数可以正常工作：
var dropboxInput = document.getElementById("dropboxInput");
dropboxInput.onchange = function(){readURL(this)};我试过了，但似乎没有得到dropboxInput.value。图像一旦被丢弃，就会被上传：
var dropbox = document.getElementById("dropbox");
dropbox.ondrop = function(){
readURL(dropboxInput);
};这是预览函数，它处理预览：
function readURL(input){
if(input.files){
for (i = 0; i < input.files.length; i++) {
var reader = new FileReader();
reader.onload = function(event) {
$($.parseHTML('<img>')).attr('src', event.target.result).appendTo(preview);
}
reader.readAsDataURL(input.files[i]);
}
}
}在输入字段中，CLOUDINARY内容如下：
<input type="file" name="file" data-url="https://api.cloudinary.com/v1_1/MYACCOUNT/auto/upload"
data-form-data="{"eager":"c_limit,h_768,w_1024","signature":"1f5c7426f428ebd02bb45180767fd920716cc59e","api_key":"185516472314647","eager_async":true,"callback":"/cloudinary_cors.html","tags":"Punta de Vistalegre,2","use_filename":true,"timestamp":"1527959323"}"
data-cloudinary-field="file" class="cloudinary-fileupload"
multiple="multiple" style="display:none" id="dropboxInput">当图像被拖放时，我找不到将它们传递给readURL()函数的方法。
提前感谢您的帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-06 04:25:43
解决方案是使用cloudinary-fileupload函数，该函数具有drop选项，用于处理已删除的文件。输入字段是使用以下Java代码以编程方式生成的：
String html = cloudinary.uploader().imageUploadTag("file", options, htmlOptions);这就是drop选项的实现：
$(".cloudinary-fileupload").cloudinary_fileupload({
...
drop: function(e, data){
readURL(data);
},
...Stack Overflow用户
发布于 2018-06-02 16:41:15
当你在做
dropbox.ondrop = function(){
readURL(dropboxInput.value);
};尝试只传递dropboxIinput.value，而不是传递dropboxInput，因为您将参数视为input元素。
更新1
如果没有得到更多的细节，我不确定我能说出什么。但是，如果通过在element#dropbox中删除文件，您的input#dropboxInput发生了更改，则可以像这样编写函数：
function readURL(input){
if(input.files.length){
for (i = 0; i < input.files.length; i++) {
image_url = window.URL.createObjectURL(input.files[i]);
$("<img>", {
src: image_url
}).appendTo(preview);
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50654311
复制相关文章
相似问题