有一个case,一个Html中的div1里面有5张图片,也就是5个img标签,然后可以拖拽到另一个div2中,然后有一个button点击后会上传拖动到div2中的图片至服务器,拖拽可以实现,就是现在按button点击上传不会做,因为div2中也都是img元素,并不是input type="file"的标签,所以后台Request.Files拿不到值,有什么办法可以实现上传图片至服务器呢?
不能用html5来实现
每拖拽到div2中一个图片后,可以用js再div2中添加一个input type="file"(不想显示可以隐藏),并且把图片地址改为拖过来的图片地址。
然后提交页面
input type="file"的话,value值因为安全原因不能设,设了也没用
不用html5 的File API 浏览器根本无法实现读取文件流,无法实现你的功能。
可以换个思路试试。
既然 div1中img已经显示了5张图片,说明你有五张图的获取方式,那是不是可以用户在div2中选了图片后,你只提交是哪几张图片的标识(或者 传递div2中图片的地址),你在服务器端自己去保存这几张图片呢?
@摇啊摇啊摇: 如果用html5的话怎么实现呢?
@nickycookie:
http://www.cnblogs.com/fly_dragon/archive/2012/06/02/2532035.html
http://www.cnblogs.com/liaofeng/archive/2011/05/18/2049928.html
<input id="fileDemo" type="file" multiple="multiple"
本来 通过 var resultFile = document.getElementById("fileDemo").files[index]
可以获取到Blob 对象
用于
FileReader.readxxxx() (接受一个Blob 对象 )
在你的场景中估计 你要自己测试 去构造Blob 对象
我没测试
@摇啊摇啊摇: 谢谢,还是要借助input type=file的咯,我的这种情况貌似没办法用到input type=file
@nickycookie:
通过 input type=file 是为了获得一个Blob
你自己构造一个 就不需要input type=file
是可以不用的
@摇啊摇啊摇: 自己构造一个什么呢?谢谢
@nickycookie:
我简单 调试了一下
这两种:
<input type="file" multiple="multiple" />
<input type="file" />
都包含一个 files 对象(FileList类型)
files里包含了很多File(你上传几个文件就有几个)
每个File里保存了一个文件的基本信息
如:lastModifiedDate,name,size,type
截图如下:
重要的是这里的name 只有文件名,不包含文件路径。
顺着原型链一路展开,会发现完全没有文件路径的数据。
<input type="file" />在获取到文件后,没在我们能访问到的对象保存文件路径,或许w3c认为这是危险的,
这个过程到底文件有没有读取到浏览器中不确定,或许读了,或许没读。我猜应该没读。
不过,这意味着即使我们有文件路径,也没法去构造一个File对象了(File的原型是Blob)。这个几个类型也没提供让我们自己构造的方法。
所以我觉得 自己构造Blob这条路是走不通的。
估计只能通过<input type="file" />获取Blob.
如果你div1中的图片是通过<input type="file" />获取到的话。
你可以在选择文件完成后,保存其files对象。
在div2中选择完成后,直接利用选中图片对应的files 仍然可以读取文件上传。
否则应该没办法了。
这个过程很多是我猜测的
我只是简单调试了一下。没仔细测。如果你有时间可以仔细测试。或许有别的发现呢。
每个img标签一定要有唯一标识这是前提条件,
然后在提交时,用选择器选择要提交DIV下的所有img标签的唯一标识,异步直接提交.同步的话用赋给隐藏域提交
异步提交的话后台如何写呢,img的话后台拿不到阿
@nickycookie: 所以要ID.后台拿到ID了.再去连接那些图片,你图片既然在IMG里,肯定是后台输出的吧,
既然图片是自己输出的,那肯定就能输出一个ID对应一张图片了
@吴瑞祥: img设了id后台还是拿不到阿
@nickycookie: ajax请求,或者在提交事件里将ID赋值给隐藏域```
这些是基本功``
@吴瑞祥: 没用的,后台拿不到的
@nickycookie: 没用你个头啊...总不能让我给你把代码写出来吧``你要做的是把图片唯一标识传到后台.
至于怎么实现,那是另一个问题了
@吴瑞祥: 你自己做的时候就知道行不行了,口说无凭。你光把图片唯一标识传到后台还是不能实现上传的
@nickycookie: 你img里的图片是哪里来的?
@吴瑞祥: 本地选择一个文件夹,然后遍历以后添加img标签到div1中的
@nickycookie: 这样啊`,我以为你图片已经在服务器了.你是用JS读取本地图片吗?你试下同样的代码在谷歌浏览器能执行不
@吴瑞祥: 不行的,因为上传得话要借助input type=file,可是我现在的情况没办法构建input type=file
@nickycookie: 是说你怎么让本地的图片显示到img标签里的?这种操作严格来说是不允许.只有IE这种不正经浏览器才允许这样做``
@吴瑞祥: 就设置img的src=file://c:\1.jpg就可以让本地图片显示在浏览器里
@nickycookie: 关于JS操作本地路径这个问题 就不说了.既然你已经得到本地图片路径了.为什么不能用input type=file?我之前做的时候也是直接用文件input上传图片的,而且图片也是处理过的
@吴瑞祥: 就是因为这个需求没办法用input type=file所以才在这里问问题亚。。。
@nickycookie: 你往form表单里添加一个file标签,然后给file标签赋本地路径值,然后提交这个表单,就能提交图片了.要上传文件到服务器就一定要file标签的,最多就是这个标签出现的地方不一样.你可以去看下jquery的文件上传插件
@吴瑞祥: file标签的value因为安全原因赋值无效的
没拖拽一个到div2里面就用js把图片路径存到一个隐藏file里面,提交就行了呃。
不行奥,file的value是不能设置的,设置了也没用,因为安全原因