js前端圖片,web前端圖片

本文目錄一覽：

• 1、前端JS的問題，如圖設置圖片寬100%，為什麼下面會多出一截？
• 2、如何在前端用js進行多圖片上傳
• 3、js 前端上傳多張圖片

前端JS的問題，如圖設置圖片寬100%，為什麼下面會多出一截？

你需要在 img 標籤的上一級標籤設置 css line-height: 0，或者把 img 變成 block 元素

如何在前端用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以便顯示       

//文件格式驗證

//圖片壓縮

js 前端上傳多張圖片

可以用webuploader插件，上傳成功後，服務端返回圖片地址，客戶端img顯示圖片

X關閉按鈕這個得自己用css樣式控制，點擊X後，服務端刪除圖片，然後前端移除該X掉的圖片