图片上传

jsp:

 <td>             <div class="img_hunk" id="upload_img">              <label class="img_upload" for="uploadfile">               <input type="file" class="upload-input" name="file" id="uploadfile" multiple="multiple" accept=".JPG,.JPEG,.PNG">                <div>                <em>上传图片</em>                </div>              </label>             </div>             <span class="hint">最少上传3张照片，单张照片最大4MB，支持JPG/JPEG/PNG格式</span>           </td>

js

 //图片预览      $("#uploadfile").change(function() {               var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; var imgDiv=""; imgDiv+="<div id='tr_userpicture' style='border:1px solid #D7D7D7;width:150px;display:none;'>"+        "<p style='text-align:cneter;'>"+        "<img alt='店铺照片'  id='file-img' style='width:118px;height:65px;margin-top:10px;margin-left:14px;'>"+        "</p><p>"+        "<a class='del_upload_img' id='del_img' style='padding: 4px 60px;display: inline-block;cursor: pointer;'>删除</a></p>'"+        "</div>";    $("#upload_img").after(imgDiv); var $img = $("#file-img"); img.push($img); $("#del_img").click(function(){   $(this).parent().parent().remove(); }); //当图片名称为空时，照片不显示。 if (document.getElementById('uploadfile').value.trim() == "") { document.getElementById('tr_userpicture').style.display = 'none'; } if (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL .createObjectURL(fileObj.files[0]); //允许上传的图片格式   var newPreview = document.getElementById("uploadfile").value; var regext = /\.jpg$|\.gif$|\.jpeg$|\.png$|\.bmp$/gi; if (!regext.test(newPreview)) { newPreview == ""; alert("选择的照片格式不正确，请重新选择！"); $(fileObj).after($(fileObj).clone($(fileObj))); $(fileObj).remove(); return false; } $img.attr("src", dataURL); $("#tr_userpicture").show(); } else { dataURL = $file.val(); var imgObj = document .getElementById("file-img"); imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; imgObj.filters .item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; } });

css:

 div.img_hunk{     width: 150px;     height: 100px;     overflow: hidden;     display: initial;     margin-right: 10px;     margin-left:-3px;     }     div.img_hunk label.img_upload{     background: url('../../images/upload.png') no-repeat;     }     .upload-input{     opacity: 0;     height: .57rem;     position: absolute;     width: 100px;     padding: 2px;     z-index: 1;     cursor: pointer     }     div.img_hunk label.img_upload div{     width: 100%;     height: 112px;     text-align: center;     }     div.img_hunk label.img_upload em{     color: #999;     width: 100%;     height: 100%;     display: inline-block;     margin-top: 60px;     }