js手機端圖片上傳代碼,js手機端圖片上傳代碼是什麼

本文目錄一覽：

• 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