web 表单方式上传文件方法（不用flash插件）
原理：使用表单的input type="file"标签，通过ajax提交表单请求，后台获取请求中的文件信息，进行文件保存操作
由于我测试用的做了一个上传文件和上传图片方法，所以我有两个请求方法
1、html页面
1）图片上传页面
@{
ViewBag.Title = "Images";
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上传文件测试</title>
</head>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/com.Upload.js"></script>
<script>
var uploadClick = function () {
//1、调用上传附件方法
var dts = coms.doUploadImage();
//将返回格式解析成json对象
var result = JSON.parse(dts);
//2、调用保存附件信息方法
//3、输出提示信息
if (result.Success) {
//获取文件相关信息（文件名、文件大小、文件路径等）
var array = result.Data;
//根据返回文件信息和页面数据，组成ajax请求，保存文件信息到数据库中
alert("图片上传成功"+ array.length +"个");
} else {
alert("图片上传失败！");
}
}
</script>
<style type="text/css">
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
</style>
<body>
<div id="master">
<form id="uploadForm">
<div style="margin: 20px 0px -20px 20px;width:250px;">
<div style="width:30%;margin-top:15px;">图片上传：</div>
<div style="width:60%;margin-top:15px;">
<input id="doc" type="file" name="Picture" multiple="multiple" onchange="javascript:coms.setImagePreviews()" accept="image/*" />
</div>
</div>
<div class="clear"></div>
<!-- 存放预览图片的区域 -->
<div id="dd" style="margin-left: 5%;width:auto;margin-top:50px;"></div>
<div class="clear"></div>
<div style="position: absolute;width: 100%;margin-top: 10px;font-weight: bolder;">
<a href="javascript:uploadClick()" >上传</a>
</div>
</form>
</div>
</body>
</html>
2）上传文件页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上传文件测试</title>
</head>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/com.Upload.js"></script>
<script>
var uploadClick = function () {
//1、调用上传附件方法
var dts = coms.doUploadFile();
//将返回格式解析成json对象
var result = JSON.parse(dts);
//2、调用保存附件信息方法 //3、输出提示信息
if (result.Success) {
//获取文件相关信息（文件名、文件大小、文件路径等）
var array = result.Data;
//根据返回文件信息和页面数据，组成ajax请求，保存文件信息到数据库中
alert("文件上传成功"+ array.length +"个"); } else {
alert("文件上传失败！");
}
} </script> <style type="text/css">
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
</style> <body>
<div id="master">
<form id="uploadForm">
<div style="margin: 20px 0px -20px 20px;width:250px;">
<div style="width:30%;margin-top:15px;">文件上传：</div>
<div style="width:60%;margin-top:15px;">
<input id="doc" type="file" name="files" multiple="multiple" />
</div>
</div>
<div class="clear"></div> <div style="position: absolute;width: 100%;margin-top: 25px;font-weight: bolder;">
<a href="javascript:uploadClick()">上传</a>
</div>
</form>
</div>
</body>
</html>
2、com.Upload.js文件内容（自定义）
var coms = {};
//执行图片上传方法（保存）
coms.doUploadImage = function () {
var result;
var formData = new FormData($("#uploadForm")[0]);
console.log(formData);
if (formData == null || formData == undefined) {
alert("未找到上传图片信息");
return;
}
$.ajax({
type: "POST",
url: '/FileUpload/MultiUploadImage',
data: formData,
async: false,
contentType: false,
processData: false,
success: function (dts) {
result = dts;
}, error: function (res) {
alert(res.responseText);
}
});
return result;
}
//执行上传附件方法（保存）
coms.doUploadFile = function () {
var result;
var formData = new FormData($("#uploadForm")[0]);
console.log(formData);
if (formData == null || formData == undefined) {
alert("未找到上传文件信息");
return;
}
$.ajax({
type: "POST",
url: '/FileUpload/MultiUploadFile',
data: formData,
async: false,
contentType: false,
processData: false,
success: function (dts) {
result = dts;
}, error: function (res) {
alert(res.responseText);
}
});
return result;
}
//多图片上传预览方法
coms.setImagePreviews = function (avalue) {
//获取选择图片的对象
var docObj = document.getElementById("doc");
//后期显示图片区域的对象
var dd = document.getElementById("dd");
dd.innerHTML = "";
//得到所有的图片文件
var fileList = docObj.files;
//循环遍历
for (var i = 0; i < fileList.length; i++) {
//动态添加html元素
dd.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";
//获取图片imgi的对象
var imgObjPreview = document.getElementById("img" + i);
if (docObj.files && docObj.files[i]) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '100px';
imgObjPreview.style.height = '90px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径
}
else {
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
//alert(imgSrc)
var localImagId = document.getElementById("img" + i);
//必须设置初始大小
localImagId.style.width = "100px";
localImagId.style.height = "90px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch (e) {
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
}
return true;
}
3、控制器页面
public class HomeController : Controller
{ /// <summary>
/// 访问上传图片页面
/// </summary>
/// <returns></returns>
public ActionResult Images()
{
return View();
} /// <summary>
/// 访问上传文件页面
/// </summary>
/// <returns></returns>
public ActionResult Files()
{
return View();
}
}
4、服务器上传方法
1）FileUploadController 内容：
public class FileUploadController : Controller
{
#region 多文件上传保存 FileUploadService myService = new FileUploadService(); /// <summary>
/// 上传多个图片
/// </summary>
[HttpPost]
public string MultiUploadImage()
{
JsonReturn result = new JsonReturn();
bool flag = false;
string msg = string.Empty;
string itemMsg = string.Empty;
JArray array = new JArray(); int count = ;
try
{
//获取所有客户端的表单数据的文件
var files = System.Web.HttpContext.Current.Request.Files;
if (files.Count > )
{
//循环所有文件信息
for (var i = ; i < files.Count; i++)
{
var file = files[i];
//物理上保存文件信息
JObject myFiles = myService.UploadImage(file, ref itemMsg);
//如果是空对象时，证明未保存成功
if (myFiles == null)
{
//返回失败状态
flag = false;
msg = itemMsg;
break;
}
else
{
//追加到数组中
array.Add(myFiles);
count++;
//返回成功状态
flag = true;
msg = "上传成功";
}
}
}
//返回成功或失败信息
result.Success = flag;
result.Message = msg;
result.Count = count;
result.Data = array;
}
catch (Exception ex)
{
flag = false;
msg = ex.Message; //返回失败结果信息
result.Success = flag;
result.Message = msg;
result.Count = count;
}
//记得序列化出去
return JsonConvert.SerializeObject(result);
} /// <summary>
/// 上传多个文件
/// </summary>
[HttpPost]
public string MultiUploadFile(string id)
{
JsonReturn result = new JsonReturn();
bool flag = false;
string msg = string.Empty;
string itemMsg = string.Empty;
JArray array = new JArray(); int count = ;
try
{
//获取所有客户端的表单数据的文件
var files = System.Web.HttpContext.Current.Request.Files;
if (files.Count > )
{
//循环所有文件信息
for (var i = ; i < files.Count; i++)
{
var file = files[i];
//物理上保存文件信息
JObject myFiles = myService.UploadFile(file, ref itemMsg);
//如果是空对象时，证明未保存成功
if (myFiles == null)
{
//返回失败状态
flag = false;
msg = itemMsg;
break;
}
else
{
//追加到数组中
array.Add(myFiles);
count++;
//返回成功状态
flag = true;
msg = "上传成功";
}
}
}
//返回成功或失败信息
result.Success = flag;
result.Message = msg;
result.Count = count;
result.Data = array;
}
catch (Exception ex)
{
flag = false;
msg = ex.Message; //返回失败结果信息
result.Success = flag;
result.Message = msg;
result.Count = count;
}
//记得序列化出去
return JsonConvert.SerializeObject(result);
} /// <summary>
/// 定义返回格式
/// </summary>
public class JsonReturn
{
public JsonReturn() { }
public JsonReturn(bool bo, string msg)
{
_Success = bo;
Message = msg;
}
public JsonReturn(bool bo, string msg, int count)
{
_Success = bo;
Message = msg;
Count = count;
} private bool _Success = false;
/// <summary>
/// 调用是否成功
/// </summary>
public bool Success
{
get { return _Success; }
set { _Success = value; }
}
/// <summary>
/// 返回的信息
/// </summary>
public string Message { get; set; } /// <summary>
/// 返回数量
/// </summary>
public int Count { get; set; } /// <summary>
/// 返回数据
/// </summary>
public object Data { get; set; }
} #endregion
}
2、FileUploadService的内容
public class FileUploadService
{
#region 文件上传的方法 /// <summary>
/// 上传单个图片
/// </summary>
public dynamic UploadImage(HttpPostedFile file, ref string msg)
{
JObject obj = new JObject();
try
{
string newFileName = string.Empty;
string newFilePath = string.Empty;
string newFileSize = string.Empty; //1、检查上传的文件路径是否存在
//获取当前程序集的文件路径
string applicationPath = System.AppDomain.CurrentDomain.BaseDirectory.ToString();
//获取程序集路径+文件夹路径
string toServerPath = applicationPath + "\\" + ConfigurationManager.AppSettings["UploadImage"];
//拼接上年月文件夹( C:\\UploadFiles\\201904 )
toServerPath = toServerPath + "\\" + DateTime.Now.ToString("yyyyMM");
//判断服务器文件夹路径是否存在
if (!Directory.Exists(toServerPath))
{
//不存在路径，则创建
Directory.CreateDirectory(toServerPath);
} //2、检查文件的格式
//指定上传文件格式类型
string[] fileExts = { ".jpg", ".jpeg", ".gif", ".png", ".bmp", ".ico" };
//获取上传文件的后缀名
string fileExt = Path.GetExtension(file.FileName).ToLower(); //只上传包含的文件类型
if (fileExts.Contains(fileExt))
{
//获取新文件名(包含后缀名)
newFileName = Guid.NewGuid().ToString() + fileExt; //file.FileName;
//拼接最终的保存文件路径（C:\UploadFiles\201904\01.jpg）
newFilePath = toServerPath + "\\" + newFileName; //检查保存是否已存在，存在不做保存
if (!System.IO.File.Exists(newFilePath))
{
//3、保存上传的文件
file.SaveAs(newFilePath);
}
//计算文件的大小（转成字符）
newFileSize = GetFileSize(newFilePath); // file.ContentLength; 获取文件的字节
//获取相对路径
string relatePath = newFilePath.Substring(applicationPath.Length, newFilePath.Length - applicationPath.Length); //返回文件相关信息
obj.Add("Old_FileName", file.FileName);
obj.Add("FileName", newFileName);
obj.Add("FilePath", newFilePath); //文件全路径
obj.Add("FileDirect", relatePath); //相对路径
obj.Add("FileSize", newFileSize);
obj.Add("FileExt", fileExt);
}
else
{
msg = "上传失败，请选择扩展名为：JPG，JPEG，GIF，PNG，BMP等类型图片！";
obj = null;
}
}
catch (Exception ex)
{
msg = ex.Message;
obj = null;
}
return obj;
} /// <summary>
/// 上传单个文件
/// </summary>
public dynamic UploadFile(HttpPostedFile file, ref string msg)
{
JObject obj = new JObject();
try
{
string newFileName = string.Empty;
string newFilePath = string.Empty;
string newFileSize = string.Empty; //1、检查上传的文件路径是否存在
//获取当前程序集的文件路径
string applicationPath = System.AppDomain.CurrentDomain.BaseDirectory.ToString();
//获取程序集路径+文件夹路径
string toServerPath = applicationPath + "\\" + ConfigurationManager.AppSettings["UploadFile"];
//拼接年月文件夹
toServerPath = toServerPath + "\\" + DateTime.Now.ToString("yyyyMM");
//判断服务器文件夹路径是否存在
if (!Directory.Exists(toServerPath))
{
//不存在路径，则创建
Directory.CreateDirectory(toServerPath);
} //2、检查文件大小是否超过
int filebyte = file.ContentLength; //单位kb（字节）
string conSize = ConfigurationManager.AppSettings["UploadFileSize"];
int conbyte = Convert.ToInt32(conSize) * * ;
if (filebyte > conbyte)
{
msg = string.Format("上传失败，上传文件超过最大限制{0}MB！", conSize);
obj = null;
}
else
{
//3、保存上传的文件
//上传文件筛选掉图片格式
string[] fileExts = { ".jpg", ".jpeg", ".gif", ".png", ".bmp", ".ico" };
//获取上传文件的后缀名
string fileExt = Path.GetExtension(file.FileName).ToLower();
if (fileExts.Contains(fileExt))
{
msg = "上传失败，上传附件不包含图片格式！";
obj = null;
}
else
{
//获取新文件名（包含后缀名）
newFileName = Guid.NewGuid().ToString() + fileExt; //file.FileName;
//拼接最终的保存文件路径（C:\UploadFiles\201904\01.jpg）
newFilePath = toServerPath + "\\" + newFileName;
//检查保存是否已存在，存在不做保存
if (!System.IO.File.Exists(newFilePath))
{
//3、保存上传的文件
file.SaveAs(newFilePath);
}
//计算文件的大小（转成字符）
newFileSize = GetFileSize(newFilePath);
//获取相对路径
string relatePath = newFilePath.Substring(applicationPath.Length, newFilePath.Length - applicationPath.Length); //4、返回文件相关信息
obj.Add("Old_FileName", file.FileName);
obj.Add("FileName", newFileName);
obj.Add("FilePath", newFilePath); //文件全路径
obj.Add("FileDirect", relatePath); //相对路径
obj.Add("FileSize", newFileSize);
obj.Add("FileExt", fileExt);
}
}
}
catch (Exception ex)
{
msg = ex.Message;
obj = null;
}
return obj;
} /// <summary>
/// 获取文件的大小
/// </summary>
/// <param name="sFileFullName"></param>
/// <returns></returns>
public string GetFileSize(string sFileFullName)
{
FileInfo fiInput = new FileInfo(sFileFullName);
double len = fiInput.Length; string[] sizes = { "B", "KB", "MB", "GB" };
int order = ;
while (len >= && order + < sizes.Length)
{
order++;
len = len / ;
}
string filesize = String.Format("{0:0.##} {1}", len, sizes[order]);
return filesize;
} #endregion
}
5、webconfig配置
1）在<appSettings>下添加如下配置
<!--保存上传图片文件夹 -->
<add key="UploadImage" value="UploadImages"/>
<!--保存上传附件文件夹 -->
<add key="UploadFile" value="UploadFiles"/>
<!--保存上传附件最大大小，单位MB-->
<add key="UploadFileSize" value="4"/>
配置文件和图片保存的文件夹名称，及上传文件时的最大上传
2）在<system.web>下添加如下配置
<!--最大请求长度,单位为KB(千字节),默认为4M,设置为1G,上限为2G -->
<httpRuntime maxRequestLength="1048576" executionTimeout="3600" targetFramework="4.5" />
3）在<system.webServer>下添加如下配置
<!--允许上传文件长度,单位字节（B）,默认为30M,设置为1G,最大为2G -->
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="1073741824"/>
</requestFiltering>
</security>
解决程序默认上传最大4M的配置
6、上传效果图
1）存放文件路径（运行项目下的文件）
2）图片预览效果
3）上传图片效果
7、web上传文件Demo下载
链接：https://pan.baidu.com/s/1QKpleoVdJ6sAhLIeNJSUZg
提取码：avcc
web 表单方式上传文件方法（不用flash插件）的更多相关文章
- Java模拟表单POST上传文件
JAVA模拟表单POST上传文件 import java.awt.image.BufferedImage;import java.awt.image.ColorModel;import java.io ...
- Servlet 表单及上传文件
// 文件路径 D:\ApacheServer\web_java\HelloWorld\src\com\test\TestServletForm.java package com.test; impo ...
- ajax异步上传文件和表单同步上传文件 的区别
1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...
- php 利用fsockopen GET/POST 提交表单及上传文件
1.GET get.php <?php $host = 'demo.fdipzone.com'; $port = 80; $errno = ''; $errstr = ''; $timeout ...
- php 利用 fsockopen GET/POST 提交表单及上传文件
1.GET get.php <?php$host = 'demo.fdipzone.com';$port = 80;$errno = '';$errstr = '';$timeout = 30; ...
- JAVA入门[16]-form表单，上传文件
一.如何传递参数 使用 @RequestParam 可以传递查询参数.例如:http://localhost:8092/category/detail?id=1 @RequestMapping(&qu ...
- CURL模拟表单post提交及相关常用参数的使用（包括提交表单同时上传文件）
转载自:https://blog.csdn.net/freedomwjx/article/details/43278157 (注:在curl前面加上time如time curl xxx,可以在最后显示 ...
- 模拟form表单请求上传文件
发请求 public string CameraFileUpload(string url,string path,string serverPath,string uploadfileName) { ...
- 使用FormData提交表单及上传文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...
随机推荐
- 人类基因（human）
题目描述 上了大学之后,小W和小Z一起报了一门三宝课,在实践课上遇到了一些问题. 一条染色体上有nn对基因,每种基因都可以用一个数ai来表示,作为标号. 现在,在其中一条染色单体上某基因发生了突变. ...
- 【HDOJ5533】Dancing Stars on Me（计算几何）
题意:给定二维平面上的n个整点,问它们是否都在正n边形的定点上 n<=100,abs(x[i]),abs(y[i])<=1e4 思路:队友做的,抱大腿 可以发现只有n=4时顶点有可能都是整 ...
- food(洛谷P4040 [AHOI2014/JSOI2014]宅男计划)
题目在这里 题目描述 外卖店一共有N种食物,分别有1到N编号.第i种食物有固定的价钱Pi和保质期Si.第i种食物会在Si天后过期.JYY是不会吃过期食物的. 比如JYY如果今天点了一份保质期为1天的食 ...
- scrapy实战
采用scrapy实现对股票网站的爬取 功能描述: 技术路线:scrapy 目标:获取上交所和深交所所有股票名称和交易信息并存储 实例编写: 步骤1:建立工程和spider爬虫模板 步骤2:编写spid ...
- 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---17
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:
- Qualcomm 專業名詞
APSS Application processor subsystem software BAM Bus Access Manager blsp BAM low speed peripheral T ...
- poj 3321(树状数组)
Apple Tree Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 24954 Accepted: 7447 Descr ...
- 吉首大学 问题 L: 小李子的老年生活
时间限制: 1 Sec 内存限制: 128 MB提交: 719 解决: 27 题目描述 小李子有n-1个朋友,分别编号为1..n-1,小李子的编号是n ,小李子的表面朋友的编号会与小李子编号互质 ...
- Android学习--ListView
这篇文章用于总结自己这两天学到的安卓的ListView和RecyclerView 的笔记,以及从我这个iOS开发者的角度去理解和学习这两个控件,会比较一下他们个iOS中那些控件是一致的,可以用来对比的 ...
- my -> mysql on duplicate key update使用总结
CREATE TABLE `t_duplicate` ( `a` int(11) NOT NULL, `b` int(255) DEFAULT NULL, `c` int(255) DEFAULT N ...