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>

 <div class="nav-search" id="nav-search" style="left: 0px;">
            <div id="dropz" class="dropzone"></div>
        </div>
<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 {

}

});

};

</script>