开始，我们以为自己什么都知道。后来发现，其实我们什么都不知道。
作为程序员的我们，经常会要用到文件的上传和下载功能。到了需要用的时候，各种查资料。有木有..有木有...。为了方便下次使用，这里来做个总结和备忘。
利用表单实现文件上传
最原始、最简单、最粗暴的文件上传。
前端代码：
&form action=&/Home/SaveFile1& method=&post& enctype=&multipart/form-data&&
&input type=&file& class=&file1& name=&file1& /&
&button type=&submit& class=&but1&&上传&/button&
1、需要post提交
2、enctype=&multipart/form-data& （传输文件）
3、需要提交的表单元素需要设置 name 属性
后台代码：
public ActionResult SaveFile1()
if (Request.Files.Count & 0)
Request.Files[0].SaveAs(Server.MapPath(&~/App_Data/&) + Request.Files[0].FileName);
return Content(&保存成功&);
return Content(&没有读到文件&);
表单异步上传（jquery.form插件）
虽然上面的方式简单粗暴，但是不够友好。页面必然会刷新。难以实现停留在当前页面，并给出文件上传成功的提示。
随着时间的流逝，技术日新月异。ajax的出现，使得异步文件提交变得更加容易。
下面我们利用jquery.form插件来实现文件的异步上传。
首先我们需要导入jquery.js和jquery.form.js
前端代码：
&form id=&form2& action=&/Home/SaveFile2& method=&post& enctype=&multipart/form-data&&
&input type=&file& class=&file1& name=&file1& /&
&button type=&submit& class=&but1&&上传1&/button&
&button type=&button& class=&but2&&上传2&/button&
//方式2（通过ajaxForm绑定ajax操作）
$(function () {
$('#form2').ajaxForm({
success: function (responseText) {
alert(responseText);
//方式3（通过ajaxSubmit直接执行ajax操作）
$(function () {
$(&.but2&).click(function () {
$('#form2').ajaxSubmit({
success: function (responseText) {
alert(responseText);
后台代码：
public string SaveFile2()
if (Request.Files.Count & 0)
Request.Files[0].SaveAs(Server.MapPath(&~/App_Data/&) + Path.GetFileName(Request.Files[0].FileName));
return &保存成功&;
return &没有读到文件&;
我们很多时候使用了插件，就不管其他三七二十一呢。
如果有点好奇心，想想这个插件是怎么实现的。随便看了看源码一千五百多行。我的妈呀，不就是个异步上传吗，怎么这么复杂。
难以看出个什么鬼来，直接断点调试下吧。
原来插件内部有iframe和FormData不同方式来上传，来适应更多版本浏览器。
模拟表单数据上传（FormData）
iframe这东西太恶心。我们看到上面可以利用FormData来上传文件，这个是Html 5 才有的。下面我们自己也来试试把。
前端代码：
&input id=&fileinfo& type=&file& class=&notFormFile& /&
&button type=&button& class=&btnNotForm&&上传4&/button&
$(&.btnNotForm&).click(function () {
var formData = new FormData();//初始化一个FormData对象
formData.append(&files&, $(&.notFormFile&)[0].files[0]);//将文件塞入FormData
url: &/Home/SaveFile2&,
type: &POST&,
data: formData,
processData: false,
// 告诉jQuery不要去处理发送的数据
contentType: false,
// 告诉jQuery不要去设置Content-Type请求头
success: function (responseText) {
alert(responseText);
后的代码：（不变，还是上例代码）
public string SaveFile2()
if (Request.Files.Count & 0)
Request.Files[0].SaveAs(Server.MapPath(&~/App_Data/&) + Path.GetFileName(Request.Files[0].FileName));
return &保存成功&;
return &没有读到文件&;
我们看到，FormData对象也只是在模拟一个原始的表单格式的数据。那有没有可能不利用表单或表单格式来上传文件呢？答案是肯定的。（下面马上揭晓）
前端代码：
&input type=&file&
id=&file5& multiple&
&button type=&button& class=&btnFile5&&上传5&/button&
$(&.btnFile5&).click(function () {
url: &/Home/SaveFile4&,
type: &POST&,
data: $(&#file5&)[0].files[0],
processData: false,
// 告诉jQuery不要去处理发送的数据
contentType: false,
// 告诉jQuery不要去设置Content-Type请求头
success: function (responseText) {
alert(responseText);
后台代码：
public string SaveFile4()
//这里发现只能得到一个网络流，没有其他信息了。（比如，文件大小、文件格式、文件名等）
Request.SaveAs(Server.MapPath(&~/App_Data/SaveFile4.data&) + &&, false);
return &保存成功&;
细心的你发现没有了表单格式，我们除了可以上传文件流数据外，不能再告诉后台其他信息了（如文件格式）。
到这里，我似乎明白了以前上传文件为什么非得要用个form包起来，原来这只是和后台约定的一个传输格式而已。
其实我们单纯的用jq的ajax传输文本数据的时候，最后也是组装成了form格式的数据，如：
data: { &userName&: &张三& }
在知道了上面的各种上传之后，我们是不是就满于现状了呢？no，很多时候我们需要传输大文件，一般服务器都会有一定的大小限制。
某天，你发现了一个激情小电影想要分享个大家。无奈，高清文件太大传不了，怎么办？我们可以化整为零，一部分一部分的传嘛，也就是所谓的分片上传。
前端代码：
&input type=&file& id=&file6& multiple&
&button type=&button& class=&btnFile6&&分片上传6&/button&
&div class=&result&&&/div&
$(&.btnFile6&).click(function () {
var upload = function (file, skip) {
var formData = new FormData();//初始化一个FormData对象
var blockSize = 1000000;//每块的大小
var nextSize = Math.min((skip + 1) * blockSize, file.size);//读取到结束位置
var fileData = file.slice(skip * blockSize, nextSize);//截取 部分文件 块
formData.append(&file&, fileData);//将 部分文件 塞入FormData
formData.append(&fileName&, file.name);//保存文件名字
url: &/Home/SaveFile6&,
type: &POST&,
data: formData,
processData: false,
// 告诉jQuery不要去处理发送的数据
contentType: false,
// 告诉jQuery不要去设置Content-Type请求头
success: function (responseText) {
$(&.result&).html(&已经上传了& + (skip + 1) + &块文件&);
if (file.size &= nextSize) {//如果上传完成，则跳出继续上传
alert(&上传完成&);
upload(file, ++skip);//递归调用
var file = $(&#file6&)[0].files[0];
upload(file, 0);
后台代码：
public string SaveFile6()
//保存文件到根目录 App_Data + 获取文件名称和格式
var filePath = Server.MapPath(&~/App_Data/&) + Request.Form[&fileName&];
//创建一个追加（FileMode.Append）方式的文件流
using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write))
using (BinaryWriter bw = new BinaryWriter(fs))
//读取文件流
BinaryReader br = new BinaryReader(Request.Files[0].InputStream);
//将文件留转成字节数组
byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length);
//将字节数组追加到文件
bw.Write(bytes);
return &保存成功&;
相对而言，代码量多了一点，复杂了一点。不过相对于网上的其他分片上传的代码应该要简单得多（因为这里没有考虑多文件块同时上传、断点续传。那样就需要在后台把文件块排序，然后上传完成按序合并，然后删除原来的临时文件。有兴趣的同学可以自己试试，稍候在分析上传插件webuploader的时候也会实现）。
【说明】：如果我们想要上传多个文件怎么办？其实H5中也提供了非常简单的方式。直接在input里面标记multiple，&input type=&file& id=&file6& multiple&，然后我们后台接收的也是一个数组Request.Files。
使用HTML5 拖拽、粘贴上传
只能说H5真是强大啊，权限越来越大，操作越来越牛逼。
前端代码（拖拽上传）：
&textarea class=&divFile7& style=&min-width:800height:150px& placeholder=&请将文件拖拽或直接粘贴到这里&&&/textarea&
$(&.divFile7&)[0].ondrop = function (event) {
event.preventDefault();//不要执行与事件关联的默认动作
var files = event.dataTransfer.//获取拖上来的文件
//以下代码不变
var formData = new FormData();//初始化一个FormData对象
formData.append(&files&, files[0]);//将文件塞入FormData
url: &/Home/SaveFile2&,
type: &POST&,
data: formData,
processData: false,
// 告诉jQuery不要去处理发送的数据
contentType: false,
// 告诉jQuery不要去设置Content-Type请求头
success: function (responseText) {
alert(responseText);
后台代码：
略（和之前的SaveFile2一样）
前端代码（粘贴上传 限图片格式）：
$(&.divFile7&)[0].onpaste = function (event) {
event.preventDefault();//不要执行与事件关联的默认动作
var clipboard = event.clipboardData.items[0];//剪贴板数据
if (clipboard.kind == 'file' || clipboard.type.indexOf('image') & -1) {//判断是图片格式
var imageFile = clipboard.getAsFile();//获取文件
//以下代码不变
var formData = new FormD
formData.append('files', imageFile);
formData.append('fileName', &temp.png&);//这里给文件命个名（或者直接在后台保存的时候命名）
url: &/Home/SaveFile8&,
type: &POST&,
data: formData,
processData: false,
// 告诉jQuery不要去处理发送的数据
contentType: false,
// 告诉jQuery不要去设置Content-Type请求头
success: function (responseText) {
alert(responseText);
后台代码：
public string SaveFile8()
//保存文件到根目录 App_Data + 获取文件名称和格式
var filePath = Server.MapPath(&~/App_Data/&) + Request.Form[&fileName&];
if (Request.Files.Count & 0)
Request.Files[0].SaveAs(filePath);
return &保存成功&;
return &没有读到文件&;
上传插件（WebUploader）
已经列举分析了多种上传文件的方式，我想总有一种适合你。不过，上传这个功能比较通用，而我们自己写的可能好多情况没有考虑到。接下来简单介绍下百度的WebUploader插件。
比起我们自己写的简单上传，它的优势：稳定、兼容性好（有flash切换，所以支持IE）、功能多、并发上传、断点续传（主要还是靠后台配合）。
插件下载：
下面开始对WebUploader的使用
第一种，简单粗暴
前端代码：
&div id=&picker&&选择文件&/div&
&button id=&ctlBtn& class=&btn btn-default&&开始上传&/button&
&!--引用webuploader的js和css--&
&link href=&~/Scripts/webuploader-0.1.5/webuploader.css& rel=&stylesheet& /&
&script src=&~/Scripts/webuploader-0.1.5/webuploader.js&&&/script&
&script type=&text/javascript&&
var uploader = WebUploader.create({
// (如果是新浏览器 可以不用 flash)
//swf: '/Scripts/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: '/Webuploader/SaveFile',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker'
$(&#ctlBtn&).click(function () {
uploader.upload();
uploader.on('uploadSuccess', function (file) {
alert(&上传成功&);
后台代码：
public string SaveFile()
if (Request.Files.Count & 0)
Request.Files[0].SaveAs(Server.MapPath(&~/App_Data/&) + Path.GetFileName(Request.Files[0].FileName));
return &保存成功&;
return &没有读到文件&;
第二种，分片上传。和我们之前自己写的效果差不多。
前端代码：
var uploader = WebUploader.create({
//兼容老版本IE
swf: '/Scripts/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: '/Webuploader/SveFile2',
// 开起分片上传。
chunked: true,
//分片大小
chunkSize: 1000000,
//上传并发数
threads: 1,
// 选择文件的按钮。
pick: '#picker'
// 点击触发上传
$(&#ctlBtn&).click(function () {
uploader.upload();
uploader.on('uploadSuccess', function (file) {
alert(&上传成功&);
后台代码：
public string SveFile2()
//保存文件到根目录 App_Data + 获取文件名称和格式
var filePath = Server.MapPath(&~/App_Data/&) + Path.GetFileName(Request.Files[0].FileName);
//创建一个追加（FileMode.Append）方式的文件流
using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write))
using (BinaryWriter bw = new BinaryWriter(fs))
//读取文件流
BinaryReader br = new BinaryReader(Request.Files[0].InputStream);
//将文件留转成字节数组
byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length);
//将字节数组追加到文件
bw.Write(bytes);
return &保存成功&;
我们看到了有个参数threads: 1上传并发数，如果我们改成大于1会怎样？前端会同时发起多个文件片上传。后台就会报错，多个进程同时操作一个文件。
那如果我们想要多线程上传怎么办？改代码吧（主要是后台逻辑）。
前端代码：
//并发上传（多线程上传）
var uploader = WebUploader.create({
//兼容老版本IE
swf: '/Scripts/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: '/Webuploader/SveFile3',
// 开起分片上传。
chunked: true,
//分片大小
chunkSize: 1000000,
//上传并发数
threads: 10,
// 选择文件的按钮。
pick: '#picker'
// 点击触发上传
$(&#ctlBtn&).click(function () {
uploader.upload();
uploader.on('uploadSuccess', function (file) {
//上传完成后，给后台发送一个合并文件的命令
url: &/Webuploader/FileMerge&,
data: { &fileName&: file.name },
type: &post&,
success: function () {
alert(&上传成功&);
后台代码：
public string SveFile3()
var chunk = Request.Form[&chunk&];//当前是第多少片
var path = Server.MapPath(&~/App_Data/&) + Path.GetFileNameWithoutExtension(Request.Files
if (!Directory.Exists(path))//判断是否存在此路径，如果不存在则创建
Directory.CreateDirectory(path);
//保存文件到根目录 App_Data + 获取文件名称和格式
var filePath = path + &/& +
//创建一个追加（FileMode.Append）方式的文件流
using (FileStream fs = new FileStream(filePath, FileMode.Append, FileAccess.Write))
using (BinaryWriter bw = new BinaryWriter(fs))
//读取文件流
BinaryReader br = new BinaryReader(Request.Files[0].InputStream);
//将文件留转成字节数组
byte[] bytes = br.ReadBytes((int)Request.Files[0].InputStream.Length);
//将字节数组追加到文件
bw.Write(bytes);
return &保存成功&;
/// &summary&
/// 合并文件
/// &/summary&
/// &param name=&path&&&/param&
/// &returns&&/returns&
public bool FileMerge()
var fileName = Request.Form[&fileName&];
var path = Server.MapPath(&~/App_Data/&) + Path.GetFileNameWithoutExtension(fileName);
//这里排序一定要正确，转成数字后排序（字符串会按1 10 11排序，默认10比2小）
foreach (var filePath in Directory.GetFiles(path).OrderBy(t =& int.Parse(Path.GetFileNameWithoutExtension(t))))
using (FileStream fs = new FileStream(Server.MapPath(&~/App_Data/&) + fileName, FileMode.Append, FileAccess.Write))
byte[] bytes = System.IO.File.ReadAllBytes(filePath);//读取文件到字节数组
fs.Write(bytes, 0, bytes.Length);//写入文件
System.IO.File.Delete(filePath);
Directory.Delete(path);
到这里你以为就结束了吗？错，还有好多情况没有考虑到。如果多个用户上传的文件名字一样会怎样？如何实现断点续传？还没实现选择多个文件？不过，这里不打算继续贴代码了（再贴下去，代码量越来越多了），自己也来练习练习吧。
提供一个思路，上传前先往数据库插入一条数据。数据包含文件要存的路径、文件名（用GUID命名，防止同名文件冲突）、文件MD5（用来识别下次续传和秒传）、临时文件块存放路径、文件是否完整上传成功等信息。
然后如果我们断网后再传，首先获取文件MD5值，看数据库里面有没上传完成的文件，如果有就实现秒传。如果没有，看是不是有上传了部分的。如果有接着传，如果没有则重新传一个新的文件。
之前我一直很疑惑，为什么上传文件一定要用form包起来，现在算是大概明白了。
最开始在javascript还不流行时，我们就可以直接使用submit按钮提交表单数据了。表单里面可以包含文字和文件。然后随着js和ajax的流行，可以利用ajax直接异步提交部分表单数据。这里开始我就纠结了，为什么ajax可以提交自己组装的数据。那为什么不能直接提交文件呢。这里我错了，ajax提交的并不是随意的数据，最后还是组装成了表单格式（因为后台技术对表单格式数据的支持比较普及）。但是现有的技术还不能通过js组装一个文件格式的表单数据。直到H5中的FormData出现，让前端js组装一个包含文件的表单格式数据成为了可能。所以说表单只是为了满足和后台“约定”的数据格式而已。
阅读(...) 评论()
我的一亩三分地:&nbsp好记吗?15:46 提问
用js把本地图片上传到服务器上，不用form表单，怎么解？
希望有谁给我一个js，急用呀，form表单用不成，js上传保存到服务器后，后台在从服务器获取图片信息，保存到数据库里。帮帮忙，解决后给采纳。谢谢
按赞数排序
&!DOCTYPE HTML&jQuery File Upload Example
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('&p/&').text(file.name).appendTo(document.body);
上传文件必须要用form表单，不用form表单js肯定没法实现，js不是干这个活的。上传文件是form表单的事情，js只是控制客户端的一些逻辑。
没人来帮帮我吗，好急的，这个星期要完成任务呀啊，对了，我是干java的
&!DOCTYPE HTML&jQuery File Upload Example
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('&p/&').text(file.name).appendTo(document.body);
看看人家的文章
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐
首先说一下所使用的环境：前端用的是vue.js+vue-cli+typescript，后端用的是spring boot，没有其他多余的依赖。最后使用效果说明：
上传图片的时候并不是通过提交form表单的形式将文件提交，而是从input节点中获取可以解析为二进制流的字符串，ajax提交这个字符串然后在java后台负责解析这个字符串，生成图片。这种方法现在看起来可能有点多
浏览器显示本地图片的预览图，调用后端接口将图片上传至服务器
一、jsp页面
&%@ page language=&java& contentType=&text/ charset=UTF-8&
pageEncoding=&UTF-8&%&
&%@ taglib prefix=&c& uri=&http://java.sun.com/jsp/jstl/c
Js 图片上传本地预览，这里只展示前端功能的实现方法，并且讲解了 IE 和 Firefox 两者兼容的处理方法。
这里是上传图片且在本地预览的 Js 函数的实现过程：
function previewImage(){
var file = document.getElementById(&uploadfile&);
//用getAsDataURL从fi
图片转成byte[]方法：
string str = @&D:\1.png&;
FileStream fs = new FileStream(str, FileMode.Open, FileAccess.Read);
BinaryReader by = new BinaryReader(f
关于js实现图片的上传和回显，曾经用户的代码粘在这里：样式：这样写样式的道理是给&input&标签的父级设置一个背景图，就是‘+’那个背景图，然后把&input&的宽高设置得跟父级一样，且完全透明（注意是透明不是隐藏），这样点击的时候看似是点击的‘+’的节点，其实点击的是&input&节点。.file-box {
position: re...
前端通过js实现获取用户上传的照片，然后传到服务器上，后台又java实现
wangEditor是一款基于javascript和css开发的 Web富文本编辑器，有轻量、简洁、易用、开源免费等优点。
官网：www.wangeditor.com
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor
下载链接：github.com/wangfup
js图片上传js图片上传js图片上传js图片上传js图片上传
使用js实现图片截取并上传到web服务器。用户可从本地选择一张图片，然后可对选择的图片进行拖动、缩放后截取，最后上传到web服务器。后台使用java实现图片的接收和存储，上传的图片默认保存到项目下的images文件夹中。php中表单提交图片如何让图片保存到指定的文件夹？
form表单中提交图片的名称到数据库，如何实现让图片自动保存到本地指定的文件夹下？？？
求大能帮忙，谢了。
浏览 751回答 2
首先将form表单的enctype属性改为multipart/form-data，method设置为post后台请看本课程http://www.imooc.com/learn/219
多看文档，http://php.net/manual/zh/features.file-upload.php
随时随地看视频图片上传 修改的时候把原来已经上传的图片的路径怎么显示在 fileInput 表单里？ - 问答 - Yii Framework 中文网
图片上传 修改的时候把原来已经上传的图片的路径怎么显示在 fileInput 表单里？
9450次浏览
悬赏 10 金钱
我在做一个图片多图片上传的功能 图片能上传成功 ，也能在视图页面正常显示。但是在二次修改的时候，一提交就没了
原因是在二次修改的表单里 你如果不选择图片 fileInput 表单里是空的所以就把数据库里的图片路径更新成空的了，我现在想到的解决办法是 （在二次修改的时候把原来已经上传的图片的路径显示在 fileInput 表单里，这样就可以避免了）
fileinput是个例外，无论insert操作还是update，正常情况在表单中选择文件的地方是清空的，可能是w3c的定义。你也可以在接收POST数据之前保存文件路径的字段的值，接收post数据之后如果发现浏览器没有新文件upload，那么save之前还原你之前保存的值即可。
你的方法也可以，有个负面影响就是用户体验会下降一些，和正常的文件上传表单感觉不一样。
共 3 条回复此方法亲测过~也是农民指点
用你的思路实现了
请问如何实现的？
骚年你确定你修改的model是findOne出来的而不是直接new出来的？
如果你在上传成功后添加数据库，那么插入库的时候没有把图片地址插库？
共 2 条回复
图片上传成功之后
图片路径插入到数据库了。
恩恩，那么你在update数据的时候，传入生成表单的model应该是findOne出来的AR对象，这个已经包含了上传路径的啊。
如果你的图片路径指的是本地路径的话，这样是行不通的，因为我记得OSX或者Linux系统是没办法获取这个路径的。
我的解决方案：
1.单独写上传接口，ajax上传
2.上传成功候，传回图片地址（可以生成一个token，防止恶意修改），填充图片字段
3.提交数据的时候，实际上是提交的上传成功候的地址（string）
4.关于修改，加载原来的地址，如果需要修改，重新上传，覆盖原来的地址即可
您需要登录后才可以回答。 |千图网提供精美好看的网页界面设计效果图免费下载，本次网页界面设计效果图是有关详情页效果图，主题是文件上传表单图片，编号是，格式是，建议使用对应的软件打开，该详情页效果图大小是68.649 KB。
文件上传表单图片是由网页界面效果图设计师Norberta上传.
浏览本次作品的您可能还对 文件上传表单素材下载 文件上传表单模板下载 文件上传表单 ajax 文件上传& 网页代码 脚本 网页特效代码 网站源码 广告代码 tab 动态界面 移动界面设计 网站装修& jquery特效&&& html感兴趣。登录查看更多精彩内容文件格式：编号：模式：RGB体积：68.649 KB
肖像权/物权：未获得模特肖像权或所有物权授权版权所有：此作品系用户共享，仅供学习交流。禁止商业使用。关注关注TA的相关作品您可能在找这些：黑色大气人才网求职者简历填写上传页简约购物结算表单sketch素材登录表单界面网页UI素材简约网页表单元素PSD国外互联网表单提交界面设计网站透明表单模板与网页表单相关的PSD素材灰色登录表单网页模板举报成功！ 3秒后自动关闭请说明举报理由源文件为合层文件素材重复/网站已存在同样内容格式不符/错误压缩包出错/解压失败文件损坏/文件空白/打不开预览图与源文件不符倒计时结束时无下载/网页丢失/404报错盗版/侵权收藏成功!
亲爱的用户，系统检测到您的帐号存在被盗风险为了您的帐号安全请绑定手机号码中国+86温馨提示：绑定手机号后可使用手机号验证码进行登录
登录千图网
或中国+86该帐号还未注册，该帐号还未注册，勾选代表你同意&
添加到收藏夹
正在加载中...&
您还未创建收藏夹，点击创建增加新收藏夹吧！
您创建的收藏会显示在此处
创建到收藏夹
QQ客服: 工作日：9:00 - 22:00节假日：9:00 - 18:00电话客服: 400-9987011工作日：9:30 - 18:30反馈时告知客服这串数字哦微信扫码领取大礼包