js上传图片的原理
Ⅰ 前端，js实现图片上传的原理是设么能回答面试即可
H5的话，就是把本地的图片按照指定的格式读取到缓存里，再供JS代码进行调用传给后台，格式的话base64吧
Ⅱ 用js、jquery如何实现上传图片的预览
$("#btnLoadPhoto").upload({ url: "../UploadForms/RequestUpload.aspx?action=photo", type: "json", callback: calla });
//获得表单元素
HttpPostedFile oFile = context.Request.Files[0];
//设置上传路径
string strUploadPath = "temp/";
//获取文件名称
string fileName = context.Request.Files[0].FileName;
补充：JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
Ⅲ 3分钟上手JS中的FileReader对象（实现上传图片预览）
详见原文：
https://www.cnblogs.com/LO-gin/p/6817319.html
方法一：使用js的FileReader对象
1、FileReader对象简介
检测浏览器对FileReader的支持
调用FileReader对象的方法
FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，
需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。
readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。（其中base64的方式就是由此来获得的。。）
文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。
例子：
3 、使用js的FileReader对象实现上传图片时的图片预览功能
方法二：使用window.createObjectURL
Ⅳ js 前端上传多张图片
可以用webuploader插件，上传成功后，服务端返回图片地址，客户端<img>显示图片
X关闭按钮这个得自己用css样式控制，点击X后，服务端删除图片，然后前端移除该X掉的图片
Ⅳ js 大文件分片上传处理如何实现
推荐采用webuploader控件来解决。
关于WebUploader的功能说明：
大文件上传续传
支持超大文件上传(100G+)和续传，可以关闭浏览器，重启系统后仍然继续上传。
开源
提供ASP.NET,JSP,php示例和源代码，其中JSP提供MySQL,Oracle,SQL Server数据库的配置和示例代码。
分片、并发
分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。
当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。
预览、压缩
支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。
解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。
多途径添加文件
支持文件多选，类型过滤，拖拽(文件&文件夹)，图片粘贴功能。上传本地指定路径的文件，不需要通过点击按钮选择文件。
粘贴功能主要体现在当有图片数据在剪切板中时（截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制），Ctrl + V便可添加此图片文件。
HTML5 & FLASH
兼容主流浏览器和低版本浏览器，接口一致，实现了两套运行时支持，用户无需关心内部用了什么内核。而且支持IE6，IE8浏览器。
同时Flash部分没有做任何UI相关的工作，方便不关心flash的用户扩展和自定义业务需求。
基于内存映射模式进行IO操作，充分发挥操作系统性能。
MD5秒传
当文件体积大、量比较多时，支持上传前做文件md5值验证，一致则可直接跳过。
如果服务端与前端统一修改算法，取段md5，可大大提升验证性能，耗时在20ms左右。
易扩展、可拆分
采用可拆分机制, 将各个功能独立成了小组件，可自由搭配。
采用AMD规范组织代码，清晰明了，方便高级玩家扩展。
Ⅵ js input file文件上传图片并展示
1 页面HTML内容
2 获取input[file]元素
3 对获取的file元素操作，也就是操作fileReader属性
1：Blob
2: File
3: FileList
4: FileReader
FileList ：
这里，默认状态下选择文件 每次files属性上FileList对象里只有一个file文件。
file对象中包含了name 文件名; size ; type 文件类型; lastModified 最后修改时间；
FileReader：异步读取本地文件内容；包括File 和Blob ；
创建FileReader对象;读取file文件
关于fileReader的几个属性：
FileReader.error 只读一个 DOMException 代表在读取文件中出现的错误。 FileReader.readyState 只读一个数字表明的状态FileReader。这是以下之一：
FileReader.result 只读文件的内容。该属性仅在读取操作完成后才有效，并且数据的格式取决于使用哪种方法来启动读取操作。
fileReader的几个事件处理程序：
1 . FileReader.onbort:在读取操作中止时触发。
2 . FileReader.onerror:在读取操作遇到错误时触发。
3 . FileReader.onload:在读取操作成功完成时触发。
4 . FileReader.onloadstart:在开始阅读时触发。
5 . FileReader.onloadend:无论是否成功 只要读取操作完成都会触发。
6 . FileReader.onprogress:阅读Blob内容时触发。
FileReader的方法：
1 . FileReader.abort();中止读取操作
2 . FileReader.readAsArrayBuffer();完成时result属性包含ArrayBuffer表示文件数据
3 . FileReader.readAsBinaryString();完成时result属性将包含来自文件的原始二进制数据作为字符串。
4 . FileReader.readAsDataURL();完成时result属性包含data：表示文本数据的URL；
5 . FileReader.readAsText();完成时result属性包含文本的内容作为文本字符串。
Ⅶ 如何在前端用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以便显示
//文件格式验证
//图片压缩
Ⅷ CSS加JS怎么实现网页移动端上传身份证和头像
为+号添加点击事件，点击时弹出文件上传的对话框，ajax异步上传完文件有现成的js库，文件上传完毕后执行回调，现在图片在+的位置，点击修改的本质就是一个update，原理和前面一样。我这里有现成的代码
Ⅸ Javascript如何实现上传图片的功能
你应该用asp、php、jsp、.net、pythone、ruby、node.js之类的东西写一个运行在服务器上的后台程序。
你写的js是在浏览器前端运行的，浏览器上传图片是往服务器端程序发送数据，前端运行的js是没这个能力的。