本文目录一览：
- 1、如何在前端用js进行多图片上传
- 2、怎么用html5或js调用手机的摄像头拍照上传以及调用手机相册选取照片
- 3、js图片上传直接浏览的代码？
- 4、JS：上传图片
- 5、jsp上传图片的js代码怎么写，帮我补充下，谢谢！
如何在前端用js进行多图片上传
产品提了一个需求，要求在一个html中实现多行多图片上传，原型图如下:
2.1 ：html
html页面由前端实现，此处增加ulli/li/ul是为了配合图片单击放大图片功能的实现
ul id="ul_other"
liinput 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 +='liinput type="file" id="file_other" class="file_input" onchange="add_file_image('other')"/li';
}
}else{
console.log('脏数据');
}
var oldBox ="lidiv class="filediv"span+/spann" +
"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) ListMultipartFile imgFileOther, 接受
//获取图片url以便显示
//文件格式验证
//图片压缩
怎么用html5或js调用手机的摄像头拍照上传以及调用手机相册选取照片
1、实现头的方法代码。
2、编写CSS样式的方法代码。
3、html上传代码。
4、JS处理方法代码。
5、测试结果如下。
注意事项：
JavaScript是一种网络脚本语言，在web应用开发中得到了广泛的应用，它经常被用来为网页添加各种动态功能，为用户提供更加流畅美观的浏览效果，通常JavaScript脚本被嵌入到HTML中来实现自己的功能。
js图片上传直接浏览的代码？
html
head
title无标题页/title
style type="text/css"#newPreview {FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)}/style script language="javascript" type="text/javascript"
function CheckImg(fileUpload)
{
var mime=fileUpload.value;
mime=mime.toLowerCase().substr(mime.lastIndexOf("."));
if(mime!=".jpg")
{
fileUpload.value="";
alert("仅支持JPG格式！");
}
else
{
var imags=document.getElementsByTagName("img");
for(i=0;iimags.length;i++)
{
if(imags[i].name=='imagePhoto')
{
imags[i].src=fileUpload.value;
}
}
}
}
/script
/head
body
form id="form1"
table
tr
td
input id="ImagePath" type="file" onchange="CheckImg(this)"/
/td
/tr
tr
td
Image ID="imagePhoto" name="imagePhoto" runat="server" Height="180px" Width="230px" //td
/tr
/table
/form
/body
/html我写的上传直接浏览图片！
JS：上传图片
FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法：
FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。
1.readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
2.readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
3.readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。
文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。
上传并展示图片小例子：
参考文件：
jsp上传图片的js代码怎么写，帮我补充下，谢谢！
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"""
2 html xmlns=""
3 head
4 meta name="DEscription" contect="my code demo" /
5 meta name="Author" contect="Michael@" /
6 meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
7 titlejs check file size @ ;/title
8 /head
9 body
10 img id="tempimg" dynsrc="" src="" style="display:none" /
11 input type="file" name="file" id="fileuploade" size="40" /
12 input type="button" name ="check" value="checkfilesize"onclick="checkfile()"/
13
14 /body
15 script type="text/javascript"
16 var maxsize = 2*1024*1024;//2M
17 var errMsg = "上传的附件文件不能超过2M！！！";
18 var tipMsg = "您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过2M，建议使用IE、FireFox、Chrome浏览器。";
19 var browserCfg = {};
20 var ua = window.navigator.userAgent;
21 if (ua.indexOf("MSIE")=1){
22 browserCfg.ie = true;
23 }else if(ua.indexOf("Firefox")=1){
24 browserCfg.firefox = true;
25 }else if(ua.indexOf("Chrome")=1){
26 browserCfg.chrome = true;
27 }
28 function checkfile(){
29 try{
30 var obj_file = document.getElementById("fileuploade");
31 if(obj_file.value==""){
32 alert("请先选择上传文件");
33 return;
34 }
35 var filesize = 0;
36 if(browserCfg.firefox || browserCfg.chrome ){
37 filesize = obj_file.files[0].size;
38 }else if(browserCfg.ie){
39 var obj_img = document.getElementById('tempimg');
40 obj_img.dynsrc=obj_file.value;
41 filesize = obj_img.fileSize;
42 }else{
43 alert(tipMsg);
44 return;
45 }
46 if(filesize==-1){
47 alert(tipMsg);
48 return;
49 }else if(filesizemaxsize){
50 alert(errMsg);
51 return;
52 }else{
53 alert("文件大小符合要求");
54 return;
55 }
56 }catch(e){
57 alert(e);
58 }
59 }
60 /script
61 /html