Fw: [問題] 圖檔拖曳到頁面上預覽 遇到問題

[liisi (小心一點)]

※ [本文轉錄自 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
→ liisi: 抱歉 轉錄一下 也請版友幫忙解答疑惑
→ gpmm: 你用的 js 套件在拖曳後要自動呼叫上傳…
→ liisi: 不能先自動上傳 一定要按下儲存 才可以上傳...
推 water2924: 你沒搞懂2樓的意思... 你原本是靠input的方式送file
→ water2924: 現在你改用drop的方式後, 你要在弄個function幫你上傳
→ liisi: 我知道2樓意思 所以不能靠input file方式囉?
→ liisi: 因為想說如果可以直接在input file塞值 就無需太大變動
推 water2924: security issue, input file只能透過視窗填值
推 water2924: 你如果不用input file的dialog 你要自己用js送formData
→ water2924: google一下 XMLHttpRequest
→ gpmm: 沒有進行上傳這個動作，你的後端（PHP）要怎麼收到任何東西
→ gpmm: 塞在 input file 本來就可以（也是最簡便的方式）重點是在
→ gpmm: 塞進去之後你做了什麼啊？沒做任何事情那他就只是個
→ gpmm: 帶值的 input file 而已啊，你 PHP 收的到誰了這是… XD
→ liisi: 我google的時候 有看到上面版友提到的方式
→ liisi: 只是這樣 要改動的程式 會比較多 看來只能這樣了Q_Q
→ liisi: 感謝大家!!