作者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/cn.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