在使用jQuery ajax 上传图片时,下载一个ajaxfileupload.js包,利用ajax和一般处理程序完成文件的上传,这样获取图片路径、上传图片就比较快捷
(一般处理程序)
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string filePath = "";
string msg = "";
string fileNewName = "";
string result = string.Empty; //也是定义一个空变量
string fileNewPath = string.Empty;
//接收文件
HttpFileCollection files = context.Request.Files;
//判断是否获取到文件
if (files.Count > 0)
{
//设置图片名称
//DateTime.Now.ToString("yyyyMMddHHmmssff")
fileNewName = Guid.NewGuid() + "_" + Path.GetFileName(files[0].FileName);
//保存文件
files[0].SaveAs(context.Server.MapPath("~/Upload/" + fileNewName));
msg = "图片上传成功";
fileNewPath = "Upload/" + fileNewName;
result = "{msg:'" + msg + "',fileNewPath:'" + fileNewPath + "'}"
}
else
{
msg = "图片上传失败";
result = "{msg:'" + msg + "'}";
}
context.Response.Write(result);
context.Response.End();
}
<script type="text/javascript">
$(function () {
$(".file").on("change", "input[type='file']", function () {
var filePath = $(this).val();
//设置上传文件的类型
if (filePath.indexOf("xls") != -1 || filePath.indexOf("xlsx") != -1 || filePath.indexOf("jpg") != -1) {
alert(111);
//执行上传文件的操作
$.ajaxFileUpload({
url: "UploadHandler.ashx", // 请求地址
secureuri: false, // 是否开启安全提交,默认为false
fileElementId: "btnfile", //需要上传的文件域的ID 也就是 <input type="file" id="btnfile" name="btnfile" />里面的id
dataType: "json", //制定返回数据类型(json,html,xml,script) 如果不写,jquery会自动判断
success: function (data) { //执行成功之后自动执行的函数
console.log(data);
alert(data.msg);
$("#txt_filepath").val(data.fileNewPath);
$("#hImg").prop("src", data.fileNewPath);
},
error: function (data) { //执行失败之后自动执行的函数
console.log(data);
}
})
}
else {
alert("请选择正确格式的文件");
}
})
})
</script>
<form id="form1" runat="server">
<div>
<span>选择文件:</span>
<input type="text" readonly="readonly" id="txt_filepath" />
<a class="file">
<input type="file" id="btnfile" name="btnfile" />
浏览文件
</a>
<img style="width: 300px; height: 300px;" id="hImg" />
</div>