带预览功能的图片上传

带预览功能的图片上传

 

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>图片上传</title>
    </head>
<body>
<form name="fileupload" method="POST" action="upload.jsp" enctype="multipart/form-data">
    <table border="1" width="450" cellpadding="4" cellspacing="2" bordercolor="#9BD7FF">
         <tr>
             <td width="100%" colspan="2">请上传扩展名为JPG或者JPEG,且大小小于500K的图片</td>
        </tr>
      <tr>
           <td width="100%" colspan="2">
               <input name="file1" id="file1" size="40" type="file" onchange="javascript:PreviewImg(this); ">
           </td>
      </tr>
      <tr>
          <td align="center" height="227">
              <div id="newPreview"><img id="defaultImg" src="images/01.gif" width="300" height="227" /></div>
          </td>
      </tr>
      <tr>
       <td width="100%" colspan="2"><center><input type="submit" value="开始上传"/></center> </td>
      </tr>
     </table>
     </form>
        <script type="text/javascript">
            function PreviewImg(imgFile){
                var newPreview = document.getElementById("newPreview");
                if(navigator.userAgent.indexOf("Mozilla/5.0")>-1){
                    document.getElementById("defaultImg").src =document.getElementById("file1").files[0].getAsDataURL();
                }else{
                    imgFile.select();
                    var img = document.selection.createRange().text;
                    newPreview.innerHTML="";
                    newPreview.style.width = "300px";    newPreview.style.height = "227px";
                    newPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
                    newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = img
                }
            }
        </script>

    </body>
</html>

你可能感兴趣的:(带预览功能的图片上传)