jquery图片上传

所属分类：输入-上传

228198 869 查看评论 (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后台管理模板

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

jQuery移动端多图上传(带裁剪功能)

适应于手机端上传图片的功能，附带上传图片裁剪功能

上传

40262 355

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

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

上传

58416 460

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

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

上传

46761 326

jQuery图片上传，带剪切功能

jQuery图片上传，适用移动端，带剪切功能，支持手势调节图片大小

上传

40334 337

讨论这个项目（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里面也可以