Html 5拖放到輸入文件

Question

我不知道這是否可能，我似乎無法找到任何東西。

我想要的是爲用戶提供「拖放」圖像或使用正常的html文件輸入框的選項。

我不會在保存表格之前上傳圖片。所以我想拖放區域只會更新字段？

我該怎麼做呢？

在此先感謝。

Answer 1

不，它不能完成。刪除的文件只能通過AJAX上傳。

以普通HTML格式上傳文件的唯一方法是通過<input type="file">和文件輸入是只讀。

Answer 2

我來這裏尋找相同的答案。最後完成以下操作，看起來適合您的需要。

爲您的圖像放置框添加div，然後在div內添加input type =「file」。根據需要設置高度和寬度。將不透明度設置爲0.現在，您的輸入填充了div，無法看到，但仍然起作用。

<div class="divClass"> 
    <input class="inputClass" name="inputName" type="file"> 
</div> 

樣式下面

<Style> 
.divClass{ 
    position: relative; 
    // anything else 
} 
.inputClass{ 
    opacity: 0; 
    position: absolute; 
    top:0; 
    left: 0; 
    height: x // as desired 
    width: x // as desired 
} 
</style> 

===編輯===

忽略我的造型在那裏，你真的只需要使用表單的輸入類型=文件。根據需要設計風格/佈局。

正如指出的那樣，通過Shazoo，拖放圖像在IE中不起作用。適用於Firefox和Chrome。不確定Opera和Safari。由於安全原因，您不能在輸入類型=文件上使用JavaScript - 它只能像Jasny所說的那樣讀取，所以您必須依賴瀏覽器供應商允許的內容。

考慮到這一點，您可以讓IE用戶選擇單擊該字段選擇並上傳文件。 IE中的默認輸入類型=「文件」提供了這種能力，所以只要你保持輸入可見，他們應該看到它。 （默認邊沿輸入類型=文件）IE例如（基於https://stackoverflow.com/a/31757969/3136874）

過濾

function stopIeDefault(){ 
    window.addEventListener("dragover",function(e){ 
    e = e || event; 
    e.preventDefault(); 
    },false); 
    window.addEventListener("drop",function(e){ 
    e = e || event; 
    e.preventDefault(); 
    },false); 
} 
if (/MSIE 10/i.test(navigator.userAgent)) { 
    // This is internet explorer 10 
    stopIeDefault() 
} 

if (/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) { 
    // This is internet explorer 9 or 11 
    stopIeDefault() 
} 

if (/Edge\/\d./i.test(navigator.userAgent)){ 
    // This is Microsoft Edge 
    stopIeDefault() 
} 

此試驗IE和邊緣。如果它檢測到一個版本，那麼它將使用stopIeDefault來阻止拖放的默認設置。如果有人拖放並將其放在表單上，​​這會阻止IE加載圖像。 （邊緣默認情況下會阻止這種情況發生，因此您可能不需要像我那樣調用stopIeDefault。）此外，您可以應用不同的樣式或添加代碼塊或不處理IE的東西。根據w3schools的統計，截至2016年8月份，IE瀏覽器的份額爲5.2-6.2％：http://www.w3schools.com/browsers/default.asp，如果這有助於你決定做什麼。

如果任何人都可以確認拖放是否適用於Safari或Opera，請執行。 ===編輯===