Input file beautification and upload local preview

Last Update:2014-12-03 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Effect:

/*input file beautification and upload local preview, compatible with Ie6-8,firefox, Chrome (required on the server, local invalid) */
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>input File Landscaping </title>
<script src= "Jquery-1.8.2.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("Input[type = ' file ']"). Change (function () {
var explorer = window.navigator.userAgent;
var url = document.getElementById ("image");
var file = document.getElementById ("file");
if (Explorer.indexof ("MSIE") >= 0) {
File.select ();
URL.SRC = Document.selection.createRange (). text;
}
else if (Explorer.indexof ("Firefox") >= 0 | | explorer.indexof ("Chrome") >= 0) {
var ofreader = new FileReader ();
var ofile = file.files[0];
Ofreader.onload = function (e) {
URL.SRC = E.target.result;
}
Ofreader.readasdataurl (ofile);
}
});
})
</script>
<style>
* {margin:0; padding:0;}

a {text-decoration:none;}

. btn_addpic {
Display:block;
position:relative;
width:140px;
height:39px;
Overflow:hidden;
border:1px solid #EBEBEB;
Background:none Repeat scroll 0 0 #F3F3F3;
Color: #999999;
Cursor:pointer;
Text-align:center;
}
. btn_addpic span {display:block; line-height:39px;}

. btn_addpic EM {
Background:url (add.png) 0 0;
Display:inline-block;
width:18px;
height:18px;
Overflow:hidden;
margin:10px 5px 10px 0;
Line-height:20em;
Vertical-align:middle;
}
. Btn_addpic:hover em {background-position: -19px 0;}

. fileprew {
Display:block;
Position:absolute;
top:0;
left:0;
width:140px;
height:39px;
font-size:100px; /* Increase the clickable area of different browsers */
opacity:0; /* key points to implement */
Filter:alpha (opacity=0); /* Compatible IE */
}

#min_img {width:100px;}

#min_img img {width:100%;}
</style>

<body>
<form>
<a href= "javascript:void (0);" class= "Btn_addpic" >
<span><em>+</em> Add Pictures </span>
<input tabindex= "3" title= "support jpg, JPEG, GIF, PNG format, file less than 5M" size= "3" name= "file" id= "file" class= "Fileprew" type= "file ">
</a>
<div id= "min_img" ></div>
</form>
</body>

Add.png

*************************************************************************************************************** *******

Input file Beautification principle: The input file transparency value is set to 0 (opacity:0;), it will not be displayed, but occupy the position, you can do the corresponding operation, and then put on top or bottom of the beautification elements can be.

*************************************************************************************************************** *******

1. IE6 can use the Value property to get an absolute path
Cases:
$ ("Input[type = ' file ']"). Change (function () {
var url= $ (this). Val ();
});

IE7 8 Local can get the address, the server can only get the name, you may use the following methods to obtain, support ie6-8.
File.select ();
URL.SRC = Document.selection.createRange (). text;

2. Firefox and Google can use HTML5 's file API FileReader get local Path

Readasarraybuffer (file): reads files as Arraybuffer.
Readasbinarystring (file): Reading files as a binary string
Readasdataurl (file): reads files as data URLs
Readastext (file, [encoding]): reads the file as text, encoding the default value is ' UTF-8 '

The FileReader object needs to be processed after it has read the file. To not block the current thread, the API uses the event model to register these events:

Onabort: Triggering on interrupt
OnError: Triggered when an error occurs
OnLoad: Triggered when the file has completed successfully reading
Onloadend: Triggered when the file has finished reading, whether or not it fails
Onloadstart: Triggered when a file starts reading
OnProgress: Periodically triggers when a file is read

Cases:

$ ("Input[type = ' file ']"). Change (function () {
var ofreader = new FileReader ();
var ofile = document.getElementById ("file"). Files[0];

            oFReader.onload = Function (e) {
                  document.getelementbyid ("image"). src = e.target.result;  /* cannot be passed to variable */
            }

             ofreader.readasdataurl (ofile);
   });

3. Google can use Window.webkitURL.createObjectURL (File.files[0]) to get the local path
Cases:
$ ("Input[type = ' file ']"). Change (function () {
var Docobj=document.getelementbyid ("file");
var imgurl= window.webkitURL.createObjectURL (Docobj.files[0]);
});

Note: 2 3 Google must be on the server side to be effective, 2 Firefox is available locally.

Input file beautification and upload local preview

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Input file beautification and upload local preview

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support