JFinal

登录 注册

上传多张图片,List files = getFiles()只获取一张图片

<input type="file" name="down[]" id="file" accept="image/*" multiple onchange="imgChange('z_photo','z_file');" />


js ---------------------------

(function(doc, win) {

     var docEl = doc.documentElement,

         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

         recalc = function() {

             var clientWidth = docEl.clientWidth;

             if (!clientWidth) return;

             if (clientWidth >= 640) {

                 docEl.style.fontSize = '100px';

             } else {

                 docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';

             }

         };

if (!doc.addEventListener) return;

     win.addEventListener(resizeEvt, recalc, false);

     doc.addEventListener('DOMContentLoaded', recalc, false);

 })(document, window);


 function imgChange(obj1, obj2){

     //获取点击的文本框

     var file = document.getElementById("file");

     //存放图片的父级元素

     var imgContainer = document.getElementsByClassName(obj1)[0];

     //获取的图片文件

     var fileList = file.files;

     //文本框的父级元素

     var input = document.getElementsByClassName(obj2)[0];

     var imgArr = [];

     //遍历获取到得图片文件        

  var z_addImg_List = document.getElementsByClassName("z_addImg");

 if(z_addImg_List.length + fileList.length > 4) {

      Toast("最多可上传4张图片");

      return;

 };       

 for(var i = 0; i < fileList.length;i++){

         var imgUrl = window.URL.createObjectURL(file.files[i]);

         imgArr.push(imgUrl);

         var img = document.createElement("img");

         img.setAttribute("src", imgArr[i]);

         /* img.setAttribute("src", imgArr[i].path);*/

         var imgAdd = document.createElement("div");

         imgAdd.setAttribute("class", "z_addImg");                 

         imgAdd.appendChild(img);  

         imgContainer.appendChild(imgAdd);

       }

        imgRemove();

 };


 function imgRemove() {

     var imgList = document.getElementsByClassName("z_addImg");

     var mask = document.getElementsByClassName("z_mask")[0];

     var cancel = document.getElementsByClassName("z_cancel")[0];

     var sure = document.getElementsByClassName("z_sure")[0];

     for (var j = 0; j < imgList.length; j++) {

         imgList[j].index = j;

         imgList[j].onclick = function() {

             var t = this;

             mask.style.display = "block";

             cancel.onclick = function() {

                 mask.style.display = "none";

             };

             sure.onclick = function(){      

                  mask.style.display = "none";

                  t.setAttribute("id", "remove");   

                  $("#remove").remove();

             };

         }

     };

 };


上传后的图片:

blob.png


如果是一张一张的上传,那后台用List<UploadFile> files = getFiles();接收,只能接收一张,批量上传则可以全部接收, 哪位大神指教

评论

  • 02-10 12:14
    使用 jfinal 官方提供的 cos 2017.5 这个版本则支持同名 input ,在首页下载 jfinal-all-3.3.zip, 里头有 jar 包

    maven 项目也可以使用其 maven 坐标,注意版本号是 2017.5
  • 发送