※ [本文转录自 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">塞值就去
想请教板友 要怎做才行