JS Upload picture Preview

HTML CSS JS upload image Preview and compression, compatible with IE browser, limit upload image size and format

Html

<form action= "Here is the address to the backstage" method= "post" enctype= "Multipart/form-data" >
<input type= "file" onchange= "Previewimage (This)" name= "file" style= "Display:none" class= "UpLoad"/>
<input type= "button" class= "upimg" value= "Upload picture"/>
<!--picture Preview Area --
<div id= "Ferret" >

</div>
<input type= "Submit" value= "Submission" class= "UPIMG1" >
</form>

 CSS

<style>
. upimg{
width:100px;
height:30px;
background: #5bc0de;
color: #fff;
Border:none;
border-radius:2px;
margin:10px;
    }
. upimg1{
width:100px;
height:30px;
background: #5bc0de;
color: #fff;
Border:none;
border-radius:2px;
margin:10px;
    }
#ferret {
margin:10px;
    }
</style>

 JS

You can hide the default file input boxes <input> elements, and use a custom interface to act as a button to open the File selection dialog box.
The implementation is simple, you just need to use the style display:none to hide the original file input box, and then call its click () method when needed.
$ (function () {
    $ (". Upimg"). Click (function () {
        $ (". UpLoad"). Trigger ("click");//Auto Trigger
    })
});

Image upload Preview    

 function previewimage (file) { 
 Span style= "font-family: ' Microsoft Yahei '; font-size:16px; " >//restricted format  
  var filepath=file.files.i TEM (0). name;//get the Upload file name  
  var type= Filepath.substr (Filepath.indexof ('. ') +1). toLowerCase ();//Gets the suffix after the point  
  (// See if this is an image file (the string "image.*" is matched by a regular expression).  
 //var ImageType =/^image\// 
 //if (!imagetype.test (File.files.item (0). Type)) /span> 
 

 //continue; 
 }) or use the following restriction format 
 if (type!== "PNG" &&type!== "JPG" &&type!== "gif") {
 Alert ("Format is incorrect, upload format only Can be png,jpg,gif format "); 
 return false;        
} 
//Picture preview 
 var img = document.getElementById (' photo '); 
 var reader = new FileReader ();//using the FileReader object, the Web application can asynchronously read the file (or raw data buffer) content stored on the user's computer 
 Reader.onload = function ( EVT) {img.src = Evt.target.result;}  
 Reader.readasdataurl (file.files[0]);  //if the user selects only one file, Then we only need to access the first element in the FileList object. files[0] 
  

 //After creating a new FileReader object, we created the onload function, Then call Readasdataurl () to start the read operation in the background. When all the contents of the image file are loaded,  
 //They convert to a data:url, Passed to the onload callback function. You only need to set the SRC attribute of the IMG element to this loaded image,  
 // You can have thumbnails of images appear on the user's screen. 

 //<input type= "file" id= "input"; 
// With the file API, we can access one or more file objects that represent the selected file after the user selects one or more files, which are contained in a FileList object. 
 
 
//If your program allows users to select multiple files, remember to add the multiple attribute on the INPUT element: <input type= "file" id= "input" multiple onchange= "Handl Efiles (this.files); 
 
//In the case where multiple files have been selected by the user, the list of files passed into the Handlefiles () function will contain multiple file objects, each of which corresponds to a real file. 
 
//The files selected by the user are stored on a FileList object, each of which corresponds to a file object. You can know how many files the user has selected by the length property of this FileList object: 
//var numfiles = files.length 
 
 The//file object has three properties that provide information about the contained file. 
 
//name file name, read-only string, and does not contain any path information. The 
 
//Size file, in bytes, is a read-only 64-bit integer. 
 The 
//type MIME type, a read-only string, and an empty string if the type is unknown. 
} 
 
 Detailed explanation https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications 
 
 
 More comprehensive code, Preview of the picture is compressed, upload the image limit size, compatible with IE browser 
  js   
  

  function previewimage (file) { 
 Span style= "FONT-SIZE:16PX; font-family: ' Microsoft Yahei '; " > var MAXWIDTH = 260;//Maximum width  
  var M Axheight = 180;//Maximum height  
  var div = document. getElementById (' Ferret ');  
  
   

            Limit size
          var size=file.files.item (0). size/1024;
          if (size>200) {
            Alert ("File greater than 200kb");
            return false;
        }

//Restricted formats
var filepath=file.files.item (0). Name;
var type=filepath.substr (Filepath.indexof ('. ') +1). toLowerCase ();//Get suffix
if (type!== "PNG" &&type!== "JPG" &&type!== "gif") {
alert ("Format is incorrect, upload format is only png,jpg,gif format")
return false;
            }

div.innerhtml = '  ';
var img = document.getElementById (' photo ');
img.onload = function () {
var rect = Clacimgzoomparam (MAXWIDTH, MaxHeight, Img.offsetwidth, img.offsetheight);
img.width = rect.width;
img.height = rect.height;
img.style.marginLeft = rect.left+ ' px ';
img.style.marginTop = rect.top/2-15+ ' px ';
            }
var reader = new FileReader ();
reader.onload = function (evt) {img.src = Evt.target.result;}
Reader.readasdataurl (file.files[0]);
        }
else//compatible with IE
        {
var sfilter= ' Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingmethod=scale,src= ";
File.select ();
var src = document.selection.createRange (). text;
div.innerhtml = '  ';
var img = document.getElementById (' photo ');
img.filters.item (' DXImageTransform.Microsoft.AlphaImageLoader '). src = src;
var rect = Clacimgzoomparam (MAXWIDTH, MaxHeight, Img.offsetwidth, img.offsetheight);
status = (' rect: ' +rect.top+ ', ' +rect.left+ ', ' +rect.width+ ', ' +rect.height ');
div.innerhtml = "<div id=divhead style= ' width:" +rect.width+ "Px;height:" +rect.height+ "Px;margin-top:" +re ct.top/2+ "PX;" +sfilter+src+ "\" ></div> ";
        }
//file.stoppropagation ();
    }
//Compress pictures
function Clacimgzoomparam (maxWidth, maxheight, width, height) {
var param = {top:0, left:0, Width:width, height:height};
if (width>maxwidth | | height>maxheight)
        {
ratewidth = width/maxwidth;
rateheight = height/maxheight;

if (Ratewidth > Rateheight)
            {
param.width = maxWidth;
param.height = Math.Round (height/ratewidth);

}else
            {
param.width = Math.Round (width/rateheight);
param.height = maxheight;
            }
        }

Param.left = Math.Round ((maxwidth-param.width)/2);
param.top = Math.Round ((maxheight-param.height)/2);
return param;

    }

JS Upload picture Preview