首页 新闻 会员 周边

文件上传问题

0
悬赏园豆:50 [待解决问题]

有一个case,一个Html中的div1里面有5张图片,也就是5个img标签,然后可以拖拽到另一个div2中,然后有一个button点击后会上传拖动到div2中的图片至服务器,拖拽可以实现,就是现在按button点击上传不会做,因为div2中也都是img元素,并不是input type="file"的标签,所以后台Request.Files拿不到值,有什么办法可以实现上传图片至服务器呢?

问题补充:

不能用html5来实现

nickycookie的主页 nickycookie | 初学一级 | 园豆:106
提问于:2014-07-23 14:42
< >
分享
所有回答(3)
0

每拖拽到div2中一个图片后,可以用js再div2中添加一个input type="file"(不想显示可以隐藏),并且把图片地址改为拖过来的图片地址。

然后提交页面

摇啊摇啊摇 | 园豆:408 (菜鸟二级) | 2014-07-23 15:29

input type="file"的话,value值因为安全原因不能设,设了也没用

支持(0) 反对(0) nickycookie | 园豆:106 (初学一级) | 2014-07-23 15:38

不用html5 的File API 浏览器根本无法实现读取文件流,无法实现你的功能。


可以换个思路试试。
既然 div1中img已经显示了5张图片,说明你有五张图的获取方式,那是不是可以用户在div2中选了图片后,你只提交是哪几张图片的标识(或者 传递div2中图片的地址),你在服务器端自己去保存这几张图片呢?

支持(0) 反对(0) 摇啊摇啊摇 | 园豆:408 (菜鸟二级) | 2014-07-23 16:52

@摇啊摇啊摇: 如果用html5的话怎么实现呢?

支持(0) 反对(0) nickycookie | 园豆:106 (初学一级) | 2014-07-23 17:20

@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 对象
我没测试

支持(0) 反对(0) 摇啊摇啊摇 | 园豆:408 (菜鸟二级) | 2014-07-24 13:40

@摇啊摇啊摇: 谢谢,还是要借助input type=file的咯,我的这种情况貌似没办法用到input type=file

支持(0) 反对(0) nickycookie | 园豆:106 (初学一级) | 2014-07-25 11:22

@nickycookie: 

通过 input type=file 是为了获得一个Blob

你自己构造一个 就不需要input type=file

是可以不用的

支持(0) 反对(0) 摇啊摇啊摇 | 园豆:408 (菜鸟二级) | 2014-07-25 11:32

@摇啊摇啊摇: 自己构造一个什么呢?谢谢

支持(0) 反对(0) nickycookie | 园豆:106 (初学一级) | 2014-07-25 11:36

@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 仍然可以读取文件上传。
否则应该没办法了。

 

这个过程很多是我猜测的
我只是简单调试了一下。没仔细测。如果你有时间可以仔细测试。或许有别的发现呢。

支持(0) 反对(0) 摇啊摇啊摇 | 园豆:408 (菜鸟二级) | 2014-07-25 13:44
0

每个img标签一定要有唯一标识这是前提条件,

然后在提交时,用选择器选择要提交DIV下的所有img标签的唯一标识,异步直接提交.同步的话用赋给隐藏域提交

吴瑞祥 | 园豆:29449 (高人七级) | 2014-07-23 15:30

异步提交的话后台如何写呢,img的话后台拿不到阿

支持(0) 反对(0) nickycookie | 园豆:106 (初学一级) | 2014-07-23 15:40

@nickycookie: 所以要ID.后台拿到ID了.再去连接那些图片,你图片既然在IMG里,肯定是后台输出的吧,

既然图片是自己输出的,那肯定就能输出一个ID对应一张图片了

支持(0) 反对(0) 吴瑞祥 | 园豆:29449 (高人七级) | 2014-07-23 17:42

@吴瑞祥: img设了id后台还是拿不到阿

支持(0) 反对(0) nickycookie | 园豆:106 (初学一级) | 2014-07-23 17:59

@nickycookie: ajax请求,或者在提交事件里将ID赋值给隐藏域```

这些是基本功``

支持(0) 反对(0) 吴瑞祥 | 园豆:29449 (高人七级) | 2014-07-23 18:11

@吴瑞祥: 没用的,后台拿不到的

支持(0) 反对(0) nickycookie | 园豆:106 (初学一级) | 2014-07-24 09:13

@nickycookie: 没用你个头啊...总不能让我给你把代码写出来吧``你要做的是把图片唯一标识传到后台.

至于怎么实现,那是另一个问题了

支持(0) 反对(0) 吴瑞祥 | 园豆:29449 (高人七级) | 2014-07-24 09:23

@吴瑞祥: 你自己做的时候就知道行不行了,口说无凭。你光把图片唯一标识传到后台还是不能实现上传的

支持(0) 反对(0) nickycookie | 园豆:106 (初学一级) | 2014-07-24 09:44

@nickycookie: 你img里的图片是哪里来的?

支持(0) 反对(0) 吴瑞祥 | 园豆:29449 (高人七级) | 2014-07-24 10:49

@吴瑞祥: 本地选择一个文件夹,然后遍历以后添加img标签到div1中的

支持(0) 反对(0) nickycookie | 园豆:106 (初学一级) | 2014-07-24 10:54

@nickycookie: 这样啊`,我以为你图片已经在服务器了.你是用JS读取本地图片吗?你试下同样的代码在谷歌浏览器能执行不

支持(0) 反对(0) 吴瑞祥 | 园豆:29449 (高人七级) | 2014-07-24 11:17

@吴瑞祥: 不行的,因为上传得话要借助input type=file,可是我现在的情况没办法构建input type=file

支持(0) 反对(0) nickycookie | 园豆:106 (初学一级) | 2014-07-24 11:22

@nickycookie: 是说你怎么让本地的图片显示到img标签里的?这种操作严格来说是不允许.只有IE这种不正经浏览器才允许这样做``

支持(0) 反对(0) 吴瑞祥 | 园豆:29449 (高人七级) | 2014-07-24 11:29

@吴瑞祥: 就设置img的src=file://c:\1.jpg就可以让本地图片显示在浏览器里

支持(0) 反对(0) nickycookie | 园豆:106 (初学一级) | 2014-07-24 11:57

@nickycookie: 关于JS操作本地路径这个问题 就不说了.既然你已经得到本地图片路径了.为什么不能用input type=file?我之前做的时候也是直接用文件input上传图片的,而且图片也是处理过的

支持(0) 反对(0) 吴瑞祥 | 园豆:29449 (高人七级) | 2014-07-24 12:13

@吴瑞祥: 就是因为这个需求没办法用input type=file所以才在这里问问题亚。。。

支持(0) 反对(0) nickycookie | 园豆:106 (初学一级) | 2014-07-24 13:17

@nickycookie: 你往form表单里添加一个file标签,然后给file标签赋本地路径值,然后提交这个表单,就能提交图片了.要上传文件到服务器就一定要file标签的,最多就是这个标签出现的地方不一样.你可以去看下jquery的文件上传插件

支持(0) 反对(0) 吴瑞祥 | 园豆:29449 (高人七级) | 2014-07-24 15:03

@吴瑞祥: file标签的value因为安全原因赋值无效的

支持(0) 反对(0) nickycookie | 园豆:106 (初学一级) | 2014-07-24 16:32
0

没拖拽一个到div2里面就用js把图片路径存到一个隐藏file里面,提交就行了呃。

Cat Qi | 园豆:761 (小虾三级) | 2014-09-04 16:47

不行奥,file的value是不能设置的,设置了也没用,因为安全原因

支持(0) 反对(0) nickycookie | 园豆:106 (初学一级) | 2014-09-04 17:10
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册