本文目录一览：

• 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+/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) 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