jQuery多图上传插件imgUp.js

所属分类:输入-上传

 126503  963  查看评论 (480)
分享到微信朋友圈
X
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'不过手机上传没有图片压缩功能,所以电脑上用用可以,手机还是不友好。

相关插件-上传

基于PhotoClip移动端上传图片裁剪

移动端上传图片裁剪插件简单版
  上传
 58196  460

h5拖拽文件图片上传插件

支持拖拽上传,拖拽排序,图片压缩的简单上传插件
  上传
 70396  496

webuploader 上传插件(根据官方做了小改)

webuploader上传插件,上图之前图片可编辑、可随意排版上传图片顺序
  上传
 69003  474

html5 头像上传更换插件

html5 头像上传、更换、剪切插件
  上传
 173796  1331

讨论这个项目(480)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ChangChang 0
    2021/4/12 10:12:06
    怎么进行反显呢,点击编辑进行反显 回复
    ChangChang 0
    2021/3/3 16:55:53
    最后点击提交的时候怎么把数据传给后台啊 回复
    代码男神? 0
    2020/12/29 18:15:34
    隔壁王老斯 0
    2020/2/24 9:56:16
    插件上传显示是原图,图片过大导致网页卡顿,真心用不了,有人解决了吗 回复
    qq84722385 0
    2019/6/4 9:38:45
    引入imgPlugin.js后毫无反应!!!!
        qq847223850
        2019/6/4 10:23:19

        不好意思,原来在script中添加

        $("#file").takungaeImgup({...............})

        就可以了

        Aomr┽心?相依┾0
        2019/8/13 14:47:55
        怎么提交呢
    回复
    lplplplplplp 0
    2019/6/3 0:08:17
    move_uploaded_file($_FILES['file']['tmp_name'],'xxxxxxxxxxxxxxxxxxxxxxxxxx');
    回复
    lplplplplplp 1
    2019/6/3 0:04:18
    setTimeout(function() {
        var arr = [];
        $("input[name='img[]']").each(function() {
            arr.push($(this).val());
        })
        console.log(arr);
    
    }, 5000);

    获得返回的路径数组

        ChangChang0
        2021/4/12 10:12:40
        这是反显嘛 应该写到哪里呢
    回复
    笑容vs 0
    2019/5/17 9:48:57
    怎么提交不到后台,接口返回200,后台要怎么接收
        ﹏俬垨、致a10
        2019/7/16 10:07:34
        接收你要提交的file,然后可以用json返回你的成果或者失败的值
    回复
    迪迪_cdws 0
    2019/4/10 18:33:32
    下载完了,浪费了jq币,改了一堆问题,都不如自己写了
        Huang_濠彬0
        2019/4/11 10:21:10
        大佬,你下载了能用吗?
        弱水三千0
        2019/4/17 16:25:13
        下载下来的源文件里好多东西怎么都没有呢,比如图片3c.png之类的,有大佬知道怎么回事儿么?
    回复
    Joe 0
    2019/4/2 13:43:20
    一张图删除之后,再次上传同一张无法上传的问题已解决.你这个问题怎么解决的,没看到你代码里面有修改,但是DEMO里面没有这个问题。 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复