jQuery多图上传插件imgUp.js

所属分类:输入-上传

 62088  500  查看评论 (427)
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'不过手机上传没有图片压缩功能,所以电脑上用用可以,手机还是不友好。

相关插件-上传

基于webuploader多图片上传插件diyUpload.js

多张图片上传 base64格式 移动端可支持,代码中有详细注释。
  上传
 27168  152

基于amazeui头像上传

基于amazeui框架,设计的头像上传插件
  上传
 32838  169

jQuery图片上传展示插件imgFileupload.js

jQuery图片上传展示,支持多图上传,限制图片上传个数
  上传
 19960  87

jQuery图片上传预览带压缩功能

基于jquery 的canvas压缩图片上传到服务器并在前端展示
  上传
 7621  20

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

    冒牌货 0
    2018/7/18 18:22:39
    前端怎么用base64进行压缩在传到后台呀 回复
    Lemon 0
    2018/7/18 10:41:23
    imgPlugin.js 引入没有反应 怎么解决?需要修改那些东西 回复
    xfp 0
    2018/7/17 16:37:37
    这个怎么用的为什么input上传文件的那个框会显示? 回复
    清=紫*烟~霞 0
    2018/7/6 16:57:22
    提交的时候图片再上传可以吗?
        BMat好好先生0
        2018/7/13 16:49:31
        应该是自己控制吧????
    回复
    人。 0
    2018/6/30 11:09:40
    西瓜 0
    2018/6/28 10:12:45
    移动端能正常使用吗? 回复
    青烟小生 0
    2018/5/19 9:33:52
    怎么下载啊
        unscrupulous0
        2018/6/15 15:43:17
        查看演示 旁边有个立即下载
    回复
    孙奇美--龙玲 0
    2018/5/14 10:21:30
    无法获取未定义或 null 引用的属性“length”
        爱我别走你过去0
        2018/5/17 14:58:54
        你好能不能共享下 imgplugin.js 这个js?
    回复
    wudachen123 0
    2018/5/13 18:30:08
    怎么不能兼容ie9??要怎么做啊 回复
    wudachen123 0
    2018/5/10 18:29:14
    怎么改变上传图片的放置顺序啊~这个插件是倒着放,我想正回来,怎么办
        爱我别走你过去0
        2018/5/17 14:57:28
        你好能不能共享下 imgplugin.js 这个js?
        因真爱而生,为家兴而战0
        2018/6/28 10:00:05
        下载包都有啊
        xiaomaool1
        2018/7/12 11:59:05

        imgUp.js中找到

         imgContainer.prepend($section);

        替换为

         $('.z_file').before($section);
    回复
取消回复