jquery图片上传

所属分类：输入-上传

227923 870 查看评论 (156)

分享到微信朋友圈

查看演示立即下载

插件描述：图片上传

更新时间：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传出的值。

Retina_Dashboard后台管理模板

仿百度自动补全搜索框效果

js上传图片预览

js上传图片本地预览

上传

113397 536

jQuery多图上传带ajax提交

jQuery多图上传可删除，可以本地预览带前台接口

上传

81643 560

webuploader 上传插件（根据官方做了小改）

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

上传

69026 474

图片上传插件zyupload java版实例代码

本插件经本人多次修改完善，功能齐全，支持多图片上传、拖拽上传、剪辑、编辑，上传预览，编辑获取默认值等功能，并且每一个功能对应一个demo，简单易懂，方便学习修改

上传

116793 806

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

不忧了 1

2023/7/12 15:55:03

javascript
// 打开不透明度后，需要设置.file_bar的z-index为正数来解决遮挡问题

$("#uploadImage_" + file.index).css("opacity", 0.2);

css

/* 每个图片上的操作bar */
.file_bar{
margin: 0;
    left: 0px;
    right: 0px;
    position: absolute;
    top: 0px;
    height:0px;
    padding:0px;
    margin: 0;
    opacity: 0.8;
    color:#fff;
    background: none repeat scroll 0 0 #000000;
    transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
overflow: hidden;
    z-index: 1;
}

不忧了0

2023/7/12 16:00:10

或者z-index设置到.file_hover里面也可以