作者liisi (小心一點)
看板PHP
標題Fw: [問題] 圖檔拖曳到頁面上預覽 遇到問題
時間Fri Jun 30 23:09:12 2017
※ [本文轉錄自 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://webptt.com/m.aspx?n=bbs/Ajax/M.1498833767.A.771.html
※ 發信站: 批踢踢實業坊(ptt.cc)
※ 轉錄者: liisi (49.159.65.63), 06/30/2017 23:09:12
1F：→ liisi: 抱歉 轉錄一下 也請版友幫忙解答疑惑 06/30 23:09
2F：→ gpmm: 你用的 js 套件在拖曳後要自動呼叫上傳… 07/01 18:21
3F：→ liisi: 不能先自動上傳 一定要按下儲存 才可以上傳... 07/01 22:22
4F：推 water2924: 你沒搞懂2樓的意思... 你原本是靠input的方式送file 07/02 17:26
5F：→ water2924: 現在你改用drop的方式後, 你要在弄個function幫你上傳 07/02 17:27
6F：→ liisi: 我知道2樓意思 所以不能靠input file方式囉? 07/02 22:25
7F：→ liisi: 因為想說如果可以直接在input file塞值 就無需太大變動 07/02 22:27
8F：推 water2924: security issue, input file只能透過視窗填值 07/03 00:04
9F：推 water2924: 你如果不用input file的dialog 你要自己用js送formData 07/03 00:10
10F：→ water2924: google一下 XMLHttpRequest 07/03 00:22
11F：→ gpmm: 沒有進行上傳這個動作，你的後端（PHP）要怎麼收到任何東西 07/04 00:51
12F：→ gpmm: 塞在 input file 本來就可以（也是最簡便的方式）重點是在 07/04 00:52
13F：→ gpmm: 塞進去之後你做了什麼啊？沒做任何事情那他就只是個 07/04 00:52
14F：→ gpmm: 帶值的 input file 而已啊，你 PHP 收的到誰了這是… XD 07/04 00:53
15F：→ liisi: 我google的時候 有看到上面版友提到的方式 07/04 10:50
16F：→ liisi: 只是這樣 要改動的程式 會比較多 看來只能這樣了Q_Q 07/04 10:50
17F：→ liisi: 感謝大家!! 07/04 10:51