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數據傳輸和輸入類型=文件問題

回答

相關問題