jquery图片上传

所属分类:输入-上传

 202562  778  查看评论 (151)
分享到微信朋友圈
X
jquery图片上传 ie兼容10

更新时间:2019-09-16 15:30:53

更新说明:修复上传文件名为中文时出现的错误问题

.net后台文件实现代码,已测试可使用,上传OK

添加文件upup.aspx,代码如下

using System;
using System.Data.OleDb;

public partial class upup : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.ContentType = "text/plain";
        var fs = Request.Files;
        if (fs.Count > 0)
        {
            try
            {
                string strFailNameOld = fs[0].FileName.ToString().Trim().ToUpper();
                strFailNameOld = strFailNameOld.Substring(0, strFailNameOld.LastIndexOf("."));
                string strFailNameNew = "";
                Random rd = new Random();
                string path = System.Web.HttpContext.Current.Server.MapPath("upimg\\");//上传路径的文件夹
                string pathName = fs[0].FileName;
                int lastPosition = pathName.LastIndexOf("\\");
                string fileName = pathName.Substring(lastPosition + 1);
                string fileType = fileName.Substring(fileName.LastIndexOf(".") + 1);
                string vstr = path + DateTime.Now.ToString("yyyymmddhhmmss") + rd.Next().ToString() + fileName;
                strFailNameNew = DateTime.Now.ToString("yyyymmddhhmmss") + rd.Next().ToString() + fileName;
                string connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source =" + vstr + ";Extended Properties='Excel 8.0;HDR=NO;IMEX=1'";
                OleDbConnection olecon = new OleDbConnection(connstr);
                fs[0].SaveAs(vstr);
                Response.Write(strFailNameNew);
                /*文件名、文件路InsertIntoNameToDB(strFailNameOld,strFailNameNew)
                 * 
                 */
            }
            catch (Exception ex)
            {
                string strErr = ex.ToString();
            }
        }
    }
}

修改jq22.js中第9行,后台文件路径,请确保路径正确

url:"upup.aspx",  // 上传文件的路径

还有注意:上传路径的文件夹upimg要存在,根据自己实际情况,只要路径正确是不会出错的。

string path = System.Web.HttpContext.Current.Server.MapPath("upimg\\");//上传路径的文件夹

以下内容由 EX丨Calibur丶 提供

这个插件前台页面的文档可以查到,后台接收就没有说明了。这里介绍一下我用springmvc接收传向后台的值:

@RequestMapping("/admin/addImage.do")
public ModelAndView handleRequest(HttpServletRequest request,
        HttpServletResponse response) throws Exception {
        MultipartResolver resolver = new CommonsMultipartResolver(request
            .getSession().getServletContext());
        MultipartHttpServletRequest multipartRequest = resolver
            .resolveMultipart(request);
        MultipartFile file = multipartRequest.getFile("fileList");

这个file就能获取前台post传出的值。

相关插件-上传

jquery头像上传剪裁插件cropper

cropper是一款使用简单且功能强大的图片剪裁jQuery插件
  上传
 101721  662

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

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

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

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

手机端实现多图片上传预览

HTML+CSS+原生JS实现手机端实现多图片上传,选中图片后,可以点击放大(有一定的注释,在PC,ipad,IOS和安卓上都测试过)
  上传
 26176  262

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

    _灵风 0
    2020/8/28 9:37:22
    我选择添加文件,文件不是在div左侧显示的 回复
    Nicole 0
    2020/8/25 17:23:57
    关于删除后不能再次上传同样图片的bug,是因为作者用的change事件,所以同一张的时候input type="file"的value未改变,事件根本没执行。可以在zyUpload.js的on方法中增加$("#fileImage").val("")解决。
        Nicole0
        2020/8/25 17:26:44
        刚才评论的方法名称被屏蔽了,在删除方法中增加,zyUpload.js第318行。
        Nicole1
        2020/8/25 17:28:54
        可以在过滤funFilterEligibleFile里增加文件最大数量和文件大小限制
    回复
    Joe 0
    2020/2/8 22:41:13
    请问下如何给插件赋值,显示几张图片,有没有什么事件可以直接调用的? 回复
    夏林 0
    2019/9/16 11:15:49
    如何在把文件上传到自己本机上?我想上传后,把文件存放在D:\upload下面,我是小白
        西瓜0
        2019/9/16 15:43:16
        文件,和说明方法已经更新,文件存放地址是由后台决定的。
    回复
    天际线 0
    2019/6/17 14:53:11
    作者说的前端文档哪里可以找得到啊・ 回复
    HeTaoJiaZi 0
    2019/4/17 14:46:45
    有前后台完整代码么? 回复
    The only ヾ 1
    2018/11/21 10:28:29
    zyFile.js 173行
    xhr.setRequestHeader("X_FILENAME", file.name);替换成
    xhr.setRequestHeader("X_FILENAME", encodeURI(encodeURI(file.name)));
    即可 支持含有中文文件名的文件上传 回复
    Zys1111 0
    2018/10/31 10:47:15
    有 bug啊选上的照片取消掉就选不了了
        过河0
        2020/5/18 13:30:29
        可以,这你都能发现
        Nicole0
        2020/8/25 17:21:07
        我也发现了,是因为取消了之后选的同一张图片。作者用的change事件,所以同一张的时候input type="file"的value未改变,事件根本没执行。可以在zyUpload.js的on方法中增加$("#fileImage").val("")解决。
        Nicole1
        2020/8/25 17:29:20
        删除方法中增加,zyUpload.js第318行
    回复
    浪潮 0
    2018/9/26 17:46:28
    能问下兄弟知道怎么限制图片数量么? 回复
    陈独秀别秀了 0
    2018/9/18 22:16:03
    兄弟你这个怎么在后台用servlet获取图片的路径呀?? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复