Javascript数据传输和输入类型=文件问题

作为我需要做的一部分工作，我试图添加一个JavaScript拖放功能。通常通过拖放操作将一个event.dataTransfer.files传递给ajax调用外部文件（如upload.php）来保存文件。但在我的情况下，我需要将其与现有的具有<input type="file">字段的表单集成。Javascript数据传输和输入类型=文件问题

有没有办法采取当一个人在删除一个文件到“落区”的event.dataTransfer.files信息，并将其注入到<input type="file">字段，以便在提交表单时，文件上传（比如模仿点击“浏览'在文件字段并选择一个文件）？

来源

2013-06-04 Robert Lyon

不能以编程方式更新文件输入字段的值。是否有任何理由不能简单地通过XHR发送文件和关联的表单域（在哪里支持）？ –

我认为HTML5支持http://www.sitepoint.com/html5-file-drag-and-drop/ –

我怀疑无法以编程方式填充字段。将不得不重新思考这个方法。干杯 –

是的，出于安全原因，input [type = file]是只读的。我刚刚通过将输入[type = file]转换为输入[type = hidden]并将该值设置为图像的base64编码URI来解决了类似问题。

（顺便说一句这与回形针https://github.com/thoughtbot/paperclip/blob/master/lib/paperclip/io_adapters/data_uri_adapter.rb自动工作）

这里是我的jQuery代码：

$(function() { 

    function renderPreviewImageFromFile(e,file) { 
    file = file || $(this).prop('files')[0]; 
    if(file) { 
     var img  = $(this).parents('li').find('img.preview'); 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
     img.attr('src', e.target.result); 
     }  
     reader.readAsDataURL(file); 
     return img.attr('src'); 
    } 
    } 

    $("ul.images-list") 
    .on('change','input.file',renderPreviewImageFromFile); 

    jQuery.event.props.push("dataTransfer"); 
    $('.file-drop') 
    .on('dragover dragenter', function(e) { 
     $(this).addClass('hover'); 
     e.preventDefault(); 
     e.stopPropagation(); 
    }).on('dragleave dragexit', function(e) { 
     $(this).removeClass('hover'); 
     e.preventDefault(); 
     e.stopPropagation(); 
    }).on('drop', function(e) { 
     $(this).removeClass('hover').find('span').remove(); 
     e.preventDefault(); 
     e.stopPropagation(); 

     // change input into hidden field 
     file = e.dataTransfer.files[0]; 
     input = $(this).parents('li').find('input.file'); 
     value = renderPreviewImageFromFile.apply(input, [null, file]); 
     input.attr('type','hidden').val(value).parents('div.input').hide(); 
    }); 

});

来源

2015-05-20 23:48:52

Javascript数据传输和输入类型=文件问题

回答

相关问题