作者liisi (小心一點)
看板Ajax
標題[問題] 圖檔拖曳到頁面上預覽 遇到問題
時間Fri Jun 30 22:42:44 2017
各位版友晚安 想請問一下 關於圖片拖拉到網頁上呈現的問題
之前都是透過點選按鈕 選擇檔案的方式 選擇圖片 畫面上會有預覽的圖片 之後再上傳
PS. 其實要上傳多張圖(是用迴圈跑的) 我用數字1表示第一張
有google到html5 但是目前對 html5 不熟悉 囧rz
簡單的範例:
<div id="imgtest1">
<img id="img1" onclick="$('#pic1').click();">
</div>
<input type="file" id="pic1" name="pic[]" onchange="return getPath(1);"/>
==========================================================================
function getPath(obj)
{
if(typeof(FileReader) != 'undefined')
{
var reader = new FileReader();
var file = document.getElementById('pic'+obj);
reader.onload = function(e)
{
document.getElementById("img"+obj).src = e.target.result;
}
reader.readAsDataURL(file.files.item(0));
}
}
==========================================================================
這時候 我只要在php端 針對 $_FILES['pic']['tmp_name'] 做處理即可
但是現在要做拖曳的功能 我上網看了一下 就在<div>加上事件
ondragover="javascript:dragHandler(event);"
ondrop="javascript:drop_image(event,1);"
==========================================================================
function dragHandler(e)
{
e.stopPropagation();
e.preventDefault();
}
function drop_image(e,obj)
{
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
for(var i=0; i<files.length; i++) //其實有多張圖
{
var pic_file = files[i];
var img_url = window.webkitURL.createObjectURL(pic_file);
document.getElementById("img"+obj).src = img_url;
}
}
==========================================================================
這時候 網頁上 是看得到預覽圖
但是<input type="file">裡面 卻沒有東西
導致我在php端 無法針對 $_FILES['pic']['tmp_name'] 做處理
應該是 如果是用點選按鈕 在選擇檔案方式 會自己塞進去......
我原本想把 pic_file塞到 <input type="file">裡面 但是卻不行
google了一下 也說不能直接將 <input type="file">塞值就去
想請教板友 要怎做才行
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 49.159.65.63
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Ajax/M.1498833767.A.771.html
※ liisi:轉錄至看板 PHP 06/30 23:09
2F：推 xdraculax: jQuery File Upload 07/02 11:42