jQuery多图上传插件imgUp.js

所属分类:输入-上传

 54681  475  查看评论 (406)
jQuery多图上传插件imgUp.js ie兼容9

更新时间:2017/4/6 上午9:56:43

更新说明:实际项目中使用的时候只需要引用:imgPlugin.js这个就可以了,因为这个是对  imgUp.js的封装。


更新时间:2017/3/30 下午7:06:44

更新说明:一张图删除之后,再次上传同一张无法上传的问题已解决,那时粗心了,嘿嘿


更新时间:2017/3/28 上午11:37:28

更新说明:支持动态创建dom结构的上传,也支持多次页面调用。里面的imgPlugin.js是对这个插件进行的封装。调用方式如下:       

$("#file" + value).takungaeImgup({
      formData: {
          "path": "artScene/",
          "name": value
      },
      url: appServer + "/ajax/uploadPic.htm",
      success: function(data) {},
      error: function(err) {
          alert(err);
      }
});

感谢网友(魏崽这二货)补充的方法

后台配合imgPlugin.js然后调用下面方式,path如果后台设置这里不需要传值,否则后台要get path  , name为图片存数据库字段多图加[],url为后台控制器路径。成功后,控制器里的返回值仔细看imgplugin.js的uploadImg()方法,需要返回data.error=0和data.url(图片路径),

$("#file").takungaeImgup({
    formData: {
        "path": "artScene/",
        "name": "img[]"
    },
    url: appServer + "/ajax/uploadPic.htm",
    success: function(data) {},
    error: function(err) {
        alert(err);
    }
});

path为图片存放路径

<input id="taglocation" name="taglocation" value="" type="hidden">
<input id="tags" name="tags" value="" type="hidden">

这两句貌似多余的,每个上传图片的section都有。

就仔细看imgplugin.js的uploadImg()方法好了,

url: appServer + "/ajax/uploadPic.htm", success: function(data) {}, error: function(err) {
        alert(err);

这里的success,error都不需要设置,只要设置下url就行了,比如url:'index/imgupload'不过手机上传没有图片压缩功能,所以电脑上用用可以,手机还是不友好。

相关插件-上传

pc端图片批量上传,可拖动图片交换位置

jQuery可批量上传图片 可以拖动交换位置 可删除
  上传
 20430  81

jQuery仿淘宝管理商品批量图片上传插件

jQuery淘宝上传商品图片代码,批量上传插件,(不兼容IE6,7,8)
  上传
 23660  68

jQuery多图上传

jQuery多图图片上传.net后端以写好,直接使用
  上传
 33864  122

多图片上传预览(纯前端)

多图片上传预览,已测试ie 360 火狐 谷歌浏览器
  上传
 182484  280

讨论这个项目(406)回答他人问题或分享插件使用方法奖励jQ币

    Wanggle 0
    2018/4/20 9:59:27
    只支持图片上传?别的文件不支持吗? 回复
    时光经年 0
    2018/4/16 16:13:57
    相同的图片再次上传怎么也能上传 回复
    听海 0
    2018/4/12 2:06:21
    有没有技术大咖能帮我定制一个软件可以防剪切和复制的软件吗?我们有一个网站正在准备上线,是关于服装设计师作品的。有的话请联系本人。18613119119.酬谢! 回复
    ?咀疥勇士 0
    2018/4/7 20:35:43
    这个能保存到数据库吗 回复
    枪手温格 0
    2018/4/7 10:54:19
    上传成功后保存, 然后再删除照片 保存 结果 第一张还显示 请问这是什么问题?
        Mr.Chen 慕白0
        2018/4/8 15:15:43
        刷新一下
    回复
      0
    2018/4/1 22:00:38
    挺不错的插件 刚好需要 回复
    ??? 0
    2018/3/29 11:11:07
    非洲小白脸 0
    2018/3/3 12:48:14
    一次页面调用两次,两次要限制不同的上传数量,大神们有解决方法吗
    回复
    pass 0
    2018/2/28 17:29:27
    这个号码能用吗?
    回复
    叶子, 0
    2018/2/21 3:46:35
取消回复