1. 程式人生 > >圖片回顯+圖片同時上傳

圖片回顯+圖片同時上傳

jsp頁面--start

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="./bootstrap.css" rel="stylesheet" type="text/css">
<script src="./jQuery-2.js" type="text/javascript"></script>
<script src="./bootstrap.js" type="text/javascript"></script>
<title>Insert title here</title>
</head>
<body>
<form id="tdtfsh_97" enctype="multipart/form-data" name="modalForm" class="form-horizontal ng-pristine ng-valid ng-scope">
<!-- 上傳口 -->
<div class="file-upload">
    <label class="col-sm-2 control-label">材料</label>
    <span class="file-upload-text">上傳圖片</span>
    <input name="files" id="file0" imgid="img0" class="file-upload-input" onchange="javascript:setImagePreviews()" type="file" accept="image/jpg,image/jpeg,image/png">
</div>
<!-- 隱藏域 -->
<div style="overflow: hidden;margin-left: 7%;">
    <div id="img_div"  style="float:left;left:5px;margin-top: 20px" class="ng-scope"></div>
</div>
</form>
</body>
</html>

jsp頁面--end

js--start

<script type="text/javascript">
                        //圖片回顯
                        var magId=0;
                        function setImagePreviews(){
                            var docobj=document.getElementById("file"+magId);
                            var dd=document.getElementById("img_div");
                            var fileList=docobj.files;    
                            for( var i=0;i<fileList.length;i++){
                                magId++;
                                $(dd).append(
                                        "<div class='fileUpload_preview' imgid='img"+(magId-1)+"' style='margin-top:5px;'>"+
                                         "<li>"+
                                         "<img id='img"+(magId-1)+"' name='"+(magId-1)+"' class='fileUpload_preview fileUpload_preview-small fileUpload_preview-square' src='"+this.result+"'>"+      
                                        "</li>"+
                                        /* "<div class='btn btn-primary btn-download'>↓</div>"+ */
                                        "<div id='close"+(magId-1)+"' class='btn btn-danger btn-close'>x</div>"+
                                        "</div>"
                                        );
                                $(".file-upload [imgid=img"+(magId-1)+"]")[0].style.position="absolute";
                                $(".file-upload [imgid=img"+(magId-1)+"]")[0].style.left="-10000px";        
                                $(".file-upload").append('<input id="file'+magId+'" name="files" imgid="img'+magId+'" class="file-upload-input" onchange="javascript:setImagePreviews()" type="file" accept="image/jpg,image/jpeg,image/png">');        
                                $("#close"+(magId-1)).on("click",function(e){
                                    var id=$(this).parents(".fileUpload_preview").attr("imgid");
                                    $(this).parent().remove();
                                    //刪除input  type=file  
                                    $(".file-upload input[imgid="+id+"]").remove();
                                });
                                var imgObjPreview=document.getElementById("img"+(magId-1));
                                if(docobj.files&&docobj.files[i]){
                                    imgObjPreview.style.display="block";
                                    imgObjPreview.style.width="100px";
                                    imgObjPreview.style.height="120px";
                                    imgObjPreview.src=window.URL.createObjectURL(docobj.files[i]);
                                }else{
                                    //IE
                                    docobj.select();
                                    var imgsrc=document.selection.createRange().text;
                                    var localImageId=document.getElementById("img"+(magId-1));
                                    localImageId.style.width="100px";
                                    localImageId.style.height="120px";
                                    try{
                                        localIamgeId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                                        localIamgeId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=imgsrc;
                                    }catch(e){
                                        alert("上傳圖片出錯");
                                        return false;
                                    }
                                    imgObjPreview.style.display="none";
                                    document.selection.empty();
                                }        
                            }
                            return true;
                        } 
                        //提交表單
                        function erp_tdtfsh_97(){
                                   var form = new FormData(document.getElementById("tdtfsh_97"));
                                   $.ajax({
                                       url:"${pageContext.request.contextPath}/erp/erp_tdtfsh_97.do",
                                       type:"post",
                                       data:form,
                                       processData:false,
                                       contentType:false,
                                       success:function(data){
                                        alert("提交成功!");
                                       },
                                       error:function(e){
                                        alert("提交失敗!!");
                                       }
                                }); 
                        }
                        </script>

js-end

後臺--start

 @RequestMapping(value="erp/erp_tdtfsh_97.do") 
public void erp_tdtfsh_97(@RequestParam MultipartFile[] files,HttpServletRequest request,HttpServletResponse response){

                PageData pResult=new PageData();

                JSONObject json_result=new JSONObject();//json資料
                for(int i=0;i<files.length;i++){
                       int bn=i+1;
                       MultipartFile file=files[i];
                       int mFile = (int) files[i].getSize();
                       if(file.getSize()!=0){
                           Date date = new Date(); 
                           String filePath ="/kkimg/assess/upload/"+new SimpleDateFormat("yyyy/MM/dd/").format(date);
                           String imgpath="upload/"+new SimpleDateFormat("yyyy/MM/dd/").format(date);
                           String filename = files[i].getOriginalFilename();
                           String prefix=filename.substring(filename.lastIndexOf(".")+1);
                           UUID uuid = UUID.randomUUID();
                           String uuidname=uuid.toString().replaceAll("-","")+"."+prefix;            
                           byte[] file36Byte = files[i].getBytes();
                           FileUtils.writeByteArrayToFile(new File(filePath+uuidname),file36Byte); 
                           System.out.println("圖片路徑:"+filePath+uuidname);
                           json_result.put("bcimg"+bn,imgpath+uuidname);
                       }
                }

}

pResult.put("result_1_value",json_result.toString());

erp_fiveModelService.save(pResult);

後臺--end