Bootstrap 上传文件或者图片的使用,亲测有效
多文件上传
·
前台:需要引入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();
}
就是这样的效果:
更多推荐
已为社区贡献1条内容
所有评论(0)