1.如何用ajax上传文件
想要用ajax上传文件,需要借助一个javascript对象FormData,首先我们先在页面上写一个input
<div id="preview">
<input type="file" id="inputfile" accept="image/*">
</div>
这里在input外面加个div是为了预览图片。然后用FormData对象来获取上传的文件。
$("#Save").click(function () {
var data = new FormData();
var imgfile = $("#inputfile");
var fileobj = imgfile.get(0).files[0]; //封面图
data.append("img", fileobj);
$.ajax({
url: "../handler/GetDataHandler.ashx",
type: "post",
data: data,
async: false,
dataType: "JSON",
processData: false,
contentType: false,
success: function (data) {
}
})
location.reload();
});
在ajax中,记得设置
processData: false,contentType: false,
FormData对象用以将数据编译成键值对,以便用[XMLHttpRequest]
来发送数据,可以发送了,来看一下如何接收这个文件。
HttpPostedFile file = context.Request.Files["img"];
string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";
uploadPath += "..\\upload\\";
string filepath = "";
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
string cfilename = file.FileName;
string aFirstName = cfilename.Substring(cfilename.LastIndexOf("\\") + 1, (cfilename.LastIndexOf(".") - cfilename.LastIndexOf("\\") - 1)); //文件名
string aLastName = cfilename.Substring(cfilename.LastIndexOf(".") + 1, (cfilename.Length - cfilename.LastIndexOf(".") - 1)); //扩展名
aFirstName = DateTime.Now.Ticks.ToString() + "-" + Guid.NewGuid();
string newfilename = aFirstName + "." + aLastName;
file.SaveAs(uploadPath + newfilename);
filepath = "/upload/" + newfilename;
}
可以上看到,接收图片的方法直接使用HttpPostedFile
来接收就行了。
2.如何预览图片
想要预览图片,想要通过<input type="file">
读取文件路径是不可行的,所以我们需要借助一个FileReader
的对象,具体实现看代码。
var preview = document.querySelector('#preview');
var eleFile = document.querySelector('#inputfile');
eleFile.addEventListener('change', function () {
var file = this.files[0];
if (file.type.indexOf("image") == 0) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
// ͼƬbase64»¯
var newUrl = this.result;
preview.style.backgroundImage = 'url(' + newUrl + ')';
$("#inputfile").hide();
};
}
});
感谢。https://www.cnblogs.com/web-wjg/p/7799173.html
放两张效果图。
image.png
Study hard and make progress every day.
更多学习资料请关注"爱游戏爱编程"。
爱游戏爱编程.jpg
网友评论