Fw: [問題] 圖檔拖曳到頁面上預覽 遇到問題
※ [本文轉錄自 Ajax 看板 #1PLcDdTn ]
作者: 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://www.ptt.cc/bbs/Ajax/M.1498833767.A.771.html
※ 發信站: 批踢踢實業坊(ptt.cc)
※ 轉錄者: liisi (49.159.65.63), 06/30/2017 23:09:12
→
06/30 23:09, , 1F
06/30 23:09, 1F
→
07/01 18:21, , 2F
07/01 18:21, 2F
→
07/01 22:22, , 3F
07/01 22:22, 3F
推
07/02 17:26, , 4F
07/02 17:26, 4F
→
07/02 17:27, , 5F
07/02 17:27, 5F
→
07/02 22:25, , 6F
07/02 22:25, 6F
→
07/02 22:27, , 7F
07/02 22:27, 7F
推
07/03 00:04, , 8F
07/03 00:04, 8F
推
07/03 00:10, , 9F
07/03 00:10, 9F
→
07/03 00:22, , 10F
07/03 00:22, 10F
→
07/04 00:51, , 11F
07/04 00:51, 11F
→
07/04 00:52, , 12F
07/04 00:52, 12F
→
07/04 00:52, , 13F
07/04 00:52, 13F
→
07/04 00:53, , 14F
07/04 00:53, 14F
→
07/04 10:50, , 15F
07/04 10:50, 15F
→
07/04 10:50, , 16F
07/04 10:50, 16F
→
07/04 10:51, , 17F
07/04 10:51, 17F