dropzone.js上传图片笔记
先插入JS和CSS
<link href="~/Content/ace/dropzone.min.css" rel="stylesheet" />
<script src="~/Content/ace/jquery-2.1.4.min.js"></script>
<script src="~/Content/dropzone/dropzone.min.js"></script>
1 2 3 | < br > < div class="nav-search" id="nav-search" style="left: 0px;"> < div id="dropz" class="dropzone"></ div > </ div >< br >< script >< br ></ script > |
var myDropzone = new Dropzone("#dropz", {
url: "/Programme/UploadBd", // 文件提交地址
method: "post", // 也可用put
paramName: "file", // 默认为file
maxFiles: 1,// 一次性上传的文件数量上限
maxFilesize: 20, // 文件大小,单位:MB
addRemoveLinks: true,
acceptedFiles: ".doc,.docx", // 上传的类型
parallelUploads: 1,// 一次上传的文件数量
//previewsContainer:"#preview", // 上传图片的预览窗口
dictDefaultMessage: '拖动文件至此或者点击上传',
dictMaxFilesExceeded: "您最多只能上传1个文件!",
dictResponseError: '文件上传失败!',
dictInvalidFileType: "文件类型只能是*.doc,*.docx",
dictFallbackMessage: "浏览器不受支持",
dictFileTooBig: "文件过大上传文件最大支持.",
dictRemoveLinks: "删除",
dictCancelUpload: "取消",
dictRemoveFile: "移除文件",//如果不写,那么移除文件就是英文的。
init: function () {
this.on("addedfile", function (file) {
// 上传文件时触发的事件
});
this.on("success", function (file, data) {
var ret = "";
var returnName = data.file;
if (returnName == null || returnName == "") {
} else {
//上传成功后,给文件对象新增几个属性SaveName和DocId并不是插件自带的别名。
file.ServerName = returnName;
file.DocId = data.DocId;
var fileType = "";//文件后缀,根据文件后缀给与不同的缩略图显示
if (file.name.indexOf('.') > 0) {
var FileNameSplit = file.name.split('.');
fileType = FileNameSplit[FileNameSplit.length - 1];
}
var imageSrc = data.FileUrl;//如果事图片的话,后台返回的时候可以直接给个Url参数直接显示,如果事别的类型的文件则自己判断后给与不同的图片路径。
if (fileType == "doc" || fileType == "docx") {
imageSrc = "/images/WordIco.jpg";
$(file.previewElement).find("img").attr("src", imageSrc);
}
if (fileType == "txt" || fileType == "text") {
imageSrc = "/images/TextIco.jpg";
$(file.previewElement).find("img").attr("src", imageSrc);
}
}
// 上传成功触发的事件
});
this.on("error", function (file, data) {
// 上传失败触发的事件
});
this.on("removedfile", function (file) {
RemoveFile(file.ServerName);
// 删除文件时触发的方法
});
}
});
//从数据库里面获取已经上传了的文件。
function GetFiles() {
$.post("/Programme/GetFiles",
{ ProgrammeType: NowProgrammeType },
function (ret) {
if (ret.State) {
var thisFiles = ret.data;
for (var i = 0; i < thisFiles.length; i++) {
var FileUrlSplit = thisFiles[i].FileUrl.split('/');
var ServerName = FileUrlSplit[FileUrlSplit.length - 1];
//定义文件对象属性。只有name和size是插件自带的属性,其余是自己另外加的。
var mockFile = { name: thisFiles[i].ProgrameName, size: thisFiles[i].FileSize, type: thisFiles[i].FileType, ServerName: ServerName, DocId : thisFiles[i].DocId == null ? "":thisFiles[i].DocId};
var ImgShow = "";
if (thisFiles[i].FileType == "doc" || thisFiles[i].FileType == "docx" || thisFiles[i].FileType == ".doc" || thisFiles[i].FileType == ".docx") {
ImgShow = "/images/WordIco.jpg";
}
if (thisFiles[i].FileType == "txt" || thisFiles[i].FileType == "text" || thisFiles[i].FileType == ".txt" || thisFiles[i].FileType == ".text") {
ImgShow = "/images/TextIco.jpg";
}
myDropzone.addFile.call(myDropzone, mockFile);
myDropzone.options.thumbnail.call(myDropzone, mockFile, ImgShow);
}
} else {
}
});
};
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战