项目场景:
上传图片功能:添加可拖拽上传图片功能
解决方案:
监听拖拽的图片
document.addEventListener("drop", function (e) { //拖离
e.preventDefault();
})
document.addEventListener("dragleave", function (e) { //拖后放
e.preventDefault();
})
document.addEventListener("dragenter", function (e) { //拖进
e.preventDefault();
})
document.addEventListener("dragover", function (e) { //拖来拖去
e.preventDefault();
})
绘制拖拽区域:
var box = document.getElementById('myAwesomeDropzone'); //拖拽区域
box.addEventListener("drop", function (e) {
var fileList = e.dataTransfer.files; //获取文件对象
//检测是否是拖拽文件到页面的操作
if(fileList.length == 0){
return false;
}
//拖拉图片到浏览器,可以实现预览功能
//规定视频格式
Array.prototype.S=String.fromCharCode(2);
Array.prototype.in_array=function(e){
var r=new RegExp(this.S+e+this.S);
return (r.test(this.S+this.join(this.S)+this.S));
};
var fileType = fileList[0].name.split('.')[1];
if (fileType != 'jpg' && fileType != 'png' && fileType != 'jpeg') {
$.message({
message: '@Localizer["Please select"]',
type: 'warning'
});
return false;
}
//创建一个url连接,供src属性引用
var fileurl = window.URL.createObjectURL(fileList[0]);
resultfile = fileList[0];
let reader = new FileReader() //新建一个FileReader对象
reader.readAsDataURL(resultfile) //将读取的文件转换成base64格式
var imgbase64 = "";
reader.onload = function(e) {
//将img标签的src换成base64格式,并显示出来
imgbase64 = e.target.result;
$.ajax({
type: "POST",
url: '@Url.Action("UploadImg", "Message")',
data: { addImage: imgbase64 },
dataType: 'json',
success: function (data, status) {
if (data.state == 1) {
$("#upload_i").css("display", "none");
$("#pic_h3").css("display", "none");
$("#modalAddPic .imgurl").data("imgurl", data.data);
$("#modalAddPic .imgurl").attr("src", data.data);
}
}
});
}
},false);
前端实现大概就是这个样子,相信你们可以看懂这个代码,嘿嘿嘿
下面是后端上传图片代码
#region 拖拽上传图片素材
public JsonResult UploadImg(string addImage)
{
var taskID = Guid.NewGuid();
var Name = taskID.ToString();
var path = hostingEnvironment.WebRootPath + "/fileUpload/pictureLibrary/" + Name;
string filename = "";//声明一个string类型的相对路径
//取图片的后缀格式
string hz = addImage.Split(',')[0].Split(';')[0].Split('/')[1];
Name = Name + "." + hz;
string[] str = addImage.Split(','); //base64Str为base64完整的字符串,先处理一下得到我们所需要的字符串
byte[] imageBytes = Convert.FromBase64String(str[1]);
//读入MemoryStream对象
MemoryStream memoryStream = new MemoryStream(imageBytes, 0, imageBytes.Length);
memoryStream.Write(imageBytes, 0, imageBytes.Length);
filename = path+"." + hz;//所要保存的相对路径及名字
var libraryPath = hostingEnvironment.WebRootPath + "/fileUpload/pictureLibrary/";
if (!Directory.Exists(libraryPath))
{
Directory.CreateDirectory(libraryPath);
}
// 转成图片
Image image = Image.FromStream(memoryStream);
// 图片名称
image.Save(filename); // 将图片存到本地Server.MapPath("pic\\") + iname + "." + hz
var data = "/fileUpload/pictureLibrary/" + Name;
return Json(new { state = 1, data });
}
#endregion
好了 整体代码大概就是这个样子,大家有什么不懂的可以留言哦