图片上传

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;
    }