『ONETHINK』多张图片的上传显示及删除

在使用ONETHINK上传图片时遇见了能上传多张,但是在后台界面上只显示的出来一张图片的问题,便修改了一点代码以便显示所有的上传图片和对上传的图片的删除(只能删除后台界面上的图片,不能真正删除已经上传了的图片),以下是本人修改之后的上传代码,有误之处,还请高手指出。

首先是最终的完成效果

这里是源代码的下载链接

然后是具体的详细步骤:

1.在需要添加图片的html页面上引入js,再编写上传图片的代码块

这一步和他原来的代码无异,只是无需写隐藏的输入框了,因为每张图片都需要一个hidden input 记录id值,所以在第二步中写到了如何动态添加input

2.修改uploadPicture函数

这一步就是动态添加图片到页面上,并且每添加一张图片便动态添加一个hidden input节点记录当前图片的id值,和为每张图片加一个删除按钮,注意hidden input 的 name 需要加 [ ] ,这样后台才接受的到数据,然后前台修改就结束了

3.修改common.css

对自己添加的删除按钮添加样式 ,并且限制弹出框中图片的大小

4.修改common.js(Public->Admin->js->common.js)

原上传图片后点击缩略图整行都可以显示大图,修改后只有点击缩略图时才能查看大图,所以用$(document).delegate为还未存在的缩略图添加事件,然后在$(“.upload-img-popup”)里直接添加本缩略图的复制节点就ok,原来的写法会导致删除图片的按钮也一并添加到了弹出框中。

5.自写myQuery.js

这一步的目的是给删除按钮添加事件,删除选择的图片和该图片对应的hidden input。?这样就完成了显示上传的多张图片,并且可以多次添加图片。

6.后台使用 I(‘post.icon’)操作来直接获得icon数据,返回数据为所有图片的id

?

源代码的链接在文章开头已经贴出,这里在贴一次,希望本文对大家可以有一点点的帮助,欢迎各种留言。

 

发表评论

电子邮件地址不会被公开。