前台:需要引入css,js   最后这个js,是使用中文,如果不用中文可以不用

有人留言说要这个文件资源,我又把文件给放到了网盘上,需要的自行下载

需要的,自己下载

<link type="text/css" rel="stylesheet" href="/Template/User/css/fileinput.css" rel="external nofollow" />
<script type="text/javascript" src="/Template/User/js/fileinput.js"></script>
<script type="text/javascript" src="/Template/User/js/fileinput_locale_zh.js"></script>

然后是选择文件:

<label for="birthday">图片上传:</label>
		
  <input id="file-1" name="file" type="file" multiple class="form-control" data-overwrite-initial="false" data-min-file-count="1"/>

然后是js:

$("#file-1").fileinput({
  uploadUrl: '', // 这个是点击上传时候的上传接口
  allowedFileExtensions : ['jpg', 'png','gif','jpeg'],//允许的文件类型
  overwriteInitial: false,
    language: 'zh',
  maxFileSize: 1500,//文件的最大大小 单位是k
    uploadExtraData: {  //上传的时候,增加的附加参数
                    userid: XXX
                },
  maxFilesNum: 10,//最多文件数量 
  previewSettings: {//设置预览图片时候的大小
            image: {width: "100px", height: "100px"},
        },
  slugCallback: function(filename) {
    return filename;
  }
}).on('filecleared',function(){//点击移除按钮时触发
	
	
})
.on('fileuploaded', function (event, data, previewId, index) {//文件上传完成后触发
	console.log(event,data,previewId,index);
	
});

后台上传接口代码:

 HttpFileCollection files = Request.Files;
            if (files != null)
            {

                string picUrl = "";
                foreach (string key in files.Keys)
                {
                    HttpPostedFile fileData = files[key];
                    if (fileData != null)
                    {

                        string sUpFileRoot = "/UpFiles/";
                        string sDirPath = sUpFileRoot + DateTime.Now.Year.ToString() + @"/" + DateTime.Now.Month.ToString() + @"/" + DateTime.Now.Day.ToString() + @"/";
                        string fileName = Path.GetFileName(fileData.FileName);      //原始文件名称
                        string fileExtension = Path.GetExtension(fileName);         //文件扩展名
                        string saveName = Guid.NewGuid().ToString() + fileExtension; //保存文件名称
                        string sPath = Server.MapPath(sDirPath);
                        picUrl += sDirPath + saveName;
                        if (!Directory.Exists(sPath))
                        {
                            Directory.CreateDirectory(sPath);
                        }

                        fileData.SaveAs(sPath + saveName);
                    }
                }
                Response.Write("{\"info\":\"" + picUrl + "\",\"status\":\"ok\"}");
                Response.End();
            }

就是这样的效果:

 

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐