下面给你介绍3种web前端上传图片的方法：
1.表单上传
最传统的图片上传方式是form表单上传，使用form表单的input[type=”file”]控件，打开系统的文件选择对话框，从而达到选择文件并上传的目的。
ajax无刷新上传
Ajax无刷新上传的方式，本质上与表单上传无异，只是把表单里的内容提出来采用ajax提交，并且由前端决定请求结果回传后的展示结果。
3.各类插件上传
当上传的需求要求可预览、显示上传进度、中断上传过程、大文件分片上传等等，这时传统的表单上传很难实现这些功能，我们可以借助现有插件完成。
如网络上传插件Web Uploader、jQuery图片预览插件imgPreview 、拖拽上传与图像预览插件Dropzone.js等等，大家可根据项目实际需求选择适合的插件。
⑵ 前端上传文件的几种方法
1.表单上传
最传统的图片上传方式是form表单上传，使用form表单的input[type=”file”]控件，打开系统的文件选择对话框，从而达到选择文件并上传的目的。
form表单上传
表单上传需要注意以下几点：
(1).提供form表单，method必须是post。
(2).form表单的enctype必须是multipart/form-data。
javascript学习交流群：453833554
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码。HTML表单如何打包数据文件是由enctype这个属性决定的。enctype有以下几种取值：
application/x-www-form-urlencoded：在发送前编码所有字符(默认)(空格被编码为’+’，特殊字符被编码为ASCII十六进制字符)。
multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain：空格转换为 “+” 加号，但不对特殊字符编码。
默认enctype=application/x-www-form-urlencoded，所以表单的内容会按URL规则编码，然后根据表单的提交方法：
method=’get’ 编码后的表单内容附加在请求连接后，
method=’post’ 编码后的表单内容作为post请求的正文内容。
⑶ 前端如何将图片上传至后端
1. 如果是通过form提交的方式 ，后端直接通过前端的name值即可获得图片
2.如果没有通过form提交 ，则可以通过js将上传的图片进行base64转码，后端再进行解码即可
⑷ 前端图片上传的两种逻辑分析
用户在表单中选择文件/图片后即发送请求，后端将文件存入服务器，返回文件对应id，用户提交表单时带上此id，实现表单与文件的关联。
用户选择图片后，前端使用FileReader()对象将其转换成base64地址，只在前端进行图片预览。表单提交时，将base64转换成file文件，先上传图片，再提交表单。
⑸ 如何在前端用js进行多图片上传
产品提了一个需求，要求在一个html中实现多行多图片上传，原型图如下:
2.1 ：html
html页面由前端实现，此处增加<ul><li></li></ul>是为了配合图片单击放大图片功能的实现
<ul id="ul_other">
<li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>
</ul>
2.2 ：js
var imgSrc_other=[];
var imgFile_other=[];
function add_file_image(id) {
var fileList =document.getElementById("file_"+id).files;// js 获取文件对象
if (verificationFile(fileList[0])){
for(var i =0;i
var imgSrcI =getObjectURL(fileList[i]);
if (id=="other"){
imgSrc_other.push(imgSrcI);
if(fileList[i].size/1024 >100) { //大于100kb，进行压缩上传
fileResizetoFile(fileList[i],0.6,function(res){
imgFile_other.push(res);
})
}else{
imgFile_other.push(res);
}
}
addNewContent(id);
}
}
//新增图片
function addNewContent(obj) {
//删除原先
$("#ul_"+obj).html("");
//判断循环新增
var text="";
if (obj=="other"){
for(var a =0;a < imgSrc_examReportCard.length;a++) {
text +='<li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>';
}
}else{
console.log('脏数据');
}
var oldBox ="<li><div class=\"filediv\"><span>+</span>\n" +
"<input type=\"file\" id=\"file_"+obj+"\" class=\"file_input\" onchange=\"add_file_image('"+obj+"')\">\n" +
"</div></li>";
$("#ul_"+obj).html( text+localText);
}
使用formData上传
var form =document.getElementById("form_addArchive");//表单id
var formData =new FormData(form);
$.each(imgFile_other,function(i, file){
formData.append('imgFileOther', file);
});
$.ajax({
url:url,
type:'POST',
async:true,
cache:false,
contentType:false,
processData:false,
dataType:'json',
data:formData,
xhrFields:{
withCredentials:true
},
success:function(data) {
}
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
}
})
后台使用@RequestParam(value ="imgFileOther", required=false) List<MultipartFile> imgFileOther, 接受
//获取图片url以便显示
//文件格式验证
//图片压缩
⑹ 前端压缩并上传图片
移动端工单报修的场景中，上传图片的功能已经屡见不鲜，但现在手机像素普遍较高，随手拍一张图片都6、7M，十几兆的图片也并不罕见。如果这些未处理的图片直接随数据上传向服务器，不但会占用更多的存储空间，而且用户也要等更久的时间，体验性会差很多，同时更长的传输时间，也加大了问题发生的概率，基于这些情况，压缩图片并上传的需求应运而生。
FileReader.readAsDataURL() 该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成（DONE），并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
canvas 用来转换图片，将原来的图片“另存为”新图片。这里核心方法是cavas的 drawImage 方法来压缩图片。
上传图片至服务器，使用 formData 对象生成表单，这里使用axios提交数据
⑺ koa实现简单图片上传
文件上传请求肯定是post请求，koa中处理post请求参数需要安装一个中间件
我们处理文件上传需要在 koaBody 的配置设置 multipart 为 true ，这样上传的文件也就是 formdata ，会被 koaBody 处理在 ctx.request.files 中，其他普通的参数通过 ctx.request.body 就可以拿到:
上传的文件会包含上面那个几个字段，其中 path 为临时路径，把他们返回，下面会把接口请求结果贴出来，看一下就知道各个字段的含义。
app中引入并使用：
引入 upload 路由:
这里用了原生的ajax，返回的response是个json字符串
安装: npm install fs-extra --save
改一下我们的 upload 接口，upload.js:
然后我们重新上传一下文件
其实上面已经实现了图片上传并且保存到我们想要的位置，那怎么访问呢，前端怎么展示呢，这就需要处理静态资源了。
在app.js中:
这时候我们就可以直接通过图片的文件名访问图片了，我们上面上传的一张图片叫 girl.jpg ，这时候直接访问:
前端加个img标签展示图片:
前端上传后:
如果需要添加其他参数，就在 formdata 中再 append 其他参数
这时候把ctx.request.body返回给前端，看看是什么样的：
到这里整个功能就实现了，欢迎大家指教哦。
⑻ 前端图片压缩上传
最近公司有个需求，就是上传照片时需要先压缩。
其中上传原理是用ajax上传formdata数据，压缩是采用canvas进行处理。
利用canvas处理Image对象调整像素尺寸，输出base64格式，再将base64格式转换为blob对象，再放进formdata对象
上传文件用formdata，图像处理用canvas。
⑼ 前端是否选了照片就开始上传,还是点击按钮再上传
点击按钮。
上传照片的时候，弹出这个框，然后点击按钮才能实现上传，不点按钮上传不了。
照片，指用感光纸放在照相底片下曝光后经显影、定影而成的人或物的图片。
⑽ 前端文件上传多种方式
前端上传文件【包含图片、视频等资源文件】是相当常见的场景，作为一名前端开发人员你会遇到后端接收文件的多种方式，以及前端不同场景下的生成的不同文件上传格式。
1、表单上传方式【最场景、最简单的方式】
上面的是挺简单的，but 刷新了，这个体验大多数场景中让人接受不了，最简单的处理方式设置submit 返回 false;
2、表单升级版 【formData】
有些场景中我们不一样会使用form，或者说不想用，那么formData就是一个很好的选择了，首先刷新问题是肯定没有了，而且看上逼格更高。
3、formData 上传 blob 图片
4、formData 上传 base64 图片； // 一般是把base64转blob在上传
其他方式欢迎留言探讨， 上面大部分写法是直接用vue的方式，其实都差不多哈。