遇到一个棘手的问题，以前一直使用form提交实现文件上传，但是这次需要在不刷新的前提下，把文件上传完，并且返回一个路径给input，以上传到数据库保存起来。单文件多文件都可以。我只上传图片，其他类型可以修改。
不是新技术了，就是用Formdata实现。
期间曾想要用百度Ueditor编辑器的单独上传功能，但是研究了一会，不是那么好用，并且用第三方不可控，也许下个版本就会移除部分函数。经过搜索，终于解决，特贴出代码给大家借鉴：我用的asp.net做后台，后台语言做法基本相同
这是前台html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ajax提交form</title>
<script type="text/javascript">
function uploadqin(fileAttach,imgurl) {
var formData = new FormData();
// HTML 文件类型input，由用户选择;fileAttach是input type=file控件的id
for (var i = 0; i < fileAttach.files.length; i++) {
formData.append(fileAttach.files[i].name, fileAttach.files[i]);
}
// formData.append("userfile", fileAttach.files[0]);//左边的是单个文件上传，需要去掉input的multiple属性
// JavaScript file-like 对象
var request = new XMLHttpRequest();
request.open("POST", "upload.ashx");
request.send(formData);
request.onreadystatechange = () => {//在这里指定上传成功的回调函数，接受返回值
if (request.readyState == 4 && request.status == 200) {
let res = request.responseText;
// console.log(res)
imgurl.value=res;
}
};
}
</script>
</head>
<body>
<input name="imgurl" id="imgurl" type="text" placeholder="请上传图片或输入网络图片地址" style="width:518px;"/>
<input type="file" id="uploadimg" value="上传图片" οnchange="javascript:uploadqin(document.getElementById('uploadimg'),document.getElementById('imgurl'))" />
</body>
</html> <%@ WebHandler Language="C#" Class="upload" %>
using System;
using System.Web;
using System.IO;
using System.Collections;
public class upload : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
Hashtable extTable = new Hashtable();
extTable.Add("image", "gif,jpg,jpeg,png,bmp,ico");
//string type_code = context.Request["userName"];
//string xiangmuid = context.Request["userid"];
try
{
HttpPostedFile file;
file = context.Request.Files[0];
string fileName = file.FileName;
string fileExt = Path.GetExtension(fileName).ToLower();
if (fileExt == "")
{
fileExt = ".jpg";
}
if (file == null || file.ContentLength == 0 || string.IsNullOrEmpty(file.FileName)) return;
string filename = DateTime.Now.ToString("yyyyMMddHHmmssffff") + fileExt;
string year = DateTime.Now.Year.ToString();
string monthday = DateTime.Now.ToString("MMdd");
if (!Directory.Exists(HttpContext.Current.Server.MapPath("documentimage/") + year))
{
Directory.CreateDirectory(HttpContext.Current.Server.MapPath("documentimage/") + year);
}
if (!Directory.Exists(HttpContext.Current.Server.MapPath("documentimage/") + year + "/" + monthday))
{
Directory.CreateDirectory(HttpContext.Current.Server.MapPath("documentimage/") + year + "/" + monthday);
}
string lujing = "documentimage/" + year + "/" + monthday + "/" + filename;
if (fileExt == ".jpg" || fileExt == ".bmp" || fileExt == ".gif" || fileExt == ".jpeg" || fileExt == ".png" || fileExt == ".ico")
{
shangchuan(file, context.Server.MapPath(lujing));
context.Response.Write("../admin/" + lujing);
}
}
catch (Exception ex)
{
//context.Response.StatusCode = 500;
//context.Response.Write(ex.Message);
context.Response.Write("0");
context.Response.End();
}
finally
{
context.Response.End();
}
///下面是多文件上传
/*context.Response.ContentType = "text/plain";
Hashtable extTable = new Hashtable();
extTable.Add("image", "gif,jpg,jpeg,png,bmp,ico");
//string type_code = context.Request["userName"];
//string xiangmuid = context.Request["userid"];
try
{
HttpPostedFile file;
for (int i = 0; i < context.Request.Files.Count; ++i)
{
file = context.Request.Files[i];
string fileName = file.FileName;
string fileExt = Path.GetExtension(fileName).ToLower();
if (fileExt == "")
{
fileExt = ".jpg";
}
if (file == null || file.ContentLength == 0 || string.IsNullOrEmpty(file.FileName)) continue;
string filename = DateTime.Now.ToString("yyyyMMddHHmmssffff") + fileExt;
string year = DateTime.Now.Year.ToString();
string monthday = DateTime.Now.ToString("MMdd");
if (!Directory.Exists(HttpContext.Current.Server.MapPath("documentimage/") + year))
{
Directory.CreateDirectory(HttpContext.Current.Server.MapPath("documentimage/") + year);
}
if (!Directory.Exists(HttpContext.Current.Server.MapPath("documentimage/") + year + "/" + monthday))
{
Directory.CreateDirectory(HttpContext.Current.Server.MapPath("documentimage/") + year + "/" + monthday);
}
string lujing = "documentimage/" + year + "/" + monthday + "/" + filename;
if (fileExt == ".jpg" || fileExt == ".bmp" || fileExt == ".gif" || fileExt == ".jpeg" || fileExt == ".png" || fileExt == ".ico")
{
shangchuan(file, context.Server.MapPath(lujing));
context.Response.Write("sucess——" + lujing);
}
//string zhiyoufilename = Path.GetFileName(file.FileName).Replace(fileExt, "");
//string sql_add = "insert into image(image_name,type_code,image_url,xiangmuid) values('" + zhiyoufilename.Trim() + "',"+type_code+",'" + lujing + "'," + xiangmuid + ")";
//string sql_add = "insert into image(type_code,image_url,xiangmuid) values("+type_code+",'" + lujing + "'," + xiangmuid + ")";
}
}
catch (Exception ex)
{
//context.Response.StatusCode = 500;
//context.Response.Write(ex.Message);
context.Response.Write("0");
context.Response.End();
}
finally
{
context.Response.End();
}*/
}
public bool IsReusable {
get {
return false;
}
}
private void shangchuan(HttpPostedFile imgFile, string lujing)
{
Stream sr = imgFile.InputStream;
System.Drawing.Image originalImage = System.Drawing.Image.FromStream(sr);
int newwidth = 0;
int newheight = 0;
caijian(originalImage, 800, 600, ref newwidth, ref newheight);
System.Drawing.Image bitmap = new System.Drawing.Bitmap(originalImage, newwidth, newheight);
bitmap.Save(lujing, System.Drawing.Imaging.ImageFormat.Jpeg);
sr.Close();
bitmap.Dispose();
originalImage.Dispose();
}
private void caijian(System.Drawing.Image ASrcImg, int AWidth, int AHeight, ref int nwidth, ref int nheight)
{
double ADestRate = ASrcImg.Width * 1.0 / ASrcImg.Height;
if (ASrcImg.Width >= ASrcImg.Height)
{
if (ASrcImg.Width >= AWidth)
{
nwidth = AWidth;
nheight = (int)(AWidth / ADestRate);
}
else
{
nwidth = ASrcImg.Width;
nheight = (int)(ASrcImg.Width / ADestRate);
}
}
else
{
if (ASrcImg.Height >= AHeight)
{
nheight = AHeight;
nwidth = (int)(AHeight * ADestRate);
}
else
{
nheight = ASrcImg.Height;
nwidth = (int)(ASrcImg.Height * ADestRate);
}
}
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
