Preview of images before uploading (PHP)

1. Create a File Form field first, and we need to use it to browse local files.
<form name= "Form1" Id= "Form1" method= "Post" action= "upload.php" >
<input type= "File" Name= "File1" id= "File1"/>
</form>
2. Try the effect:
Determine the file type:
When the user chooses a picture file, he is expected to see the thumbnail of the image immediately so that he can confirm that he did not upload his photo of his own ^_^ to the server.
Before previewing, you have to decide whether the user chooses an image file, and if he wants to use a. rar file for his avatar, we also need to be polite to remind you.
<form name= "Form2" id= "Form2" method= "post" action= "upload.php" >
<input type= "File" Name= "File2" id= "File2"
Onchange= "preview ()"/>
</form>
JavaScript function Implementation, note using the DOM method getElementById to access the object. Do not use form again
and the Name property of input to access the object, only IE is doing so. <script type= "Text/javascript" >
function Preview2 () {
var x = document.getElementById ("File2");
if (!x | |!x.value) return;
if (X.value.indexof (". jpg") <0
&& x.value.indexof (". jpeg") <0
&& x.value.indexof (". gif") <0) {
Alert ("You have chosen a file that does not appear to be an image. ");
}else{
Alert ("through");
}
}
</script>
3. Try the effect:
　　
Here's a question, if the user chooses a file named "Fake.jpg.txt", the script will still think it's a legitimate image file. A viable solution is to convert the file name to lowercase, then the last 4 to 5 bits of the file path, and determine if the filename extension is a supported image file extension. But it's a little awkward and there's no sense of beauty, and we'll change the alternative: use "regular expressions" to determine the file extension.
<script type= "Text/javascript" >
function preview3 () {
var x = document.getElementById ("File3");
if (!x | |!x.value) return;
var patn =/\.jpg$|\.jpeg$|\.gif$/i;
if (Patn.test (X.value)) {
Alert ("through");
}else{
Alert ("You have chosen a file that does not appear to be an image. ");
}
}
</script>
4. Look at the effect (you can create your own "fake.jpg.txt" file to try):
　　
Back to this script, even if you don't understand the two lines of regular expressions, the beauty of the whole script is obvious: concise, straightforward, and semantically smooth, consistent with the requirements of the Web Standard for XHTML, as well as the innate "perfect" doctrine of web designers or developers.
JJWW after a big paragraph, turn to focus--preview image
The basic design idea for the preview function is clear: Create an IMG element and assign the value of the file field to the IMG
The src attribute of the element. <form name= "FORM4" id= "FORM4" method= "Post" action= "#" >
<input type= "File" Name= "File4" id= "File4"
Onchange= "Preview4 ()"/>

</form>
<script type= "Text/javascript" >
function Preview4 () {
var x = document.getElementById ("File4");
var y = document.getElementById ("Pic4");
if (!x | |!x.value | |!y) return;
var patn =/\.jpg$|\.jpeg$|\.gif$/i;
if (Patn.test (X.value)) {
Y.SRC = "file://localhost/" + x.value;
}else{
Alert ("You have chosen a file that does not appear to be an image. ");
}
}
</script>
5. Try the effect:
　　
If you are using Firefox (or opera), you may find that nothing has happened. Yes, it's unfortunate. Firefox's security policy does not allow a user's local image file to be displayed. Do not know why to do so, the personal feel that the image file does not cause serious security problems. Even the most popular JPEG file that causes Windows to crash not long ago, the precondition is that the user chooses the file or you know the exact path of the file on the user's hard drive. So I think this strategy is likely to come from a "lazy" developer, and do not want to write more programs to distinguish whether the local file is an image file or a malicious file, Firefox security requirements make them somewhat too sensitive.
The only way to make Firefox display local files is to modify its default security policy:
Enter "About:config" in the address bar of Firefox
Continue to enter "Security.checkloaduri"
Double-click the line of text listed below to change its value from true to False
Then you can try the preview above, everything works well! Unfortunately, it doesn't make sense to ask all users to modify the value (not to mention the process of modification). What we can do is to accept the "ridiculous" situation where Firefox cannot preview local images.
Use DOM to create objects
In the XHTML code above, in order to preview the image, we have added an IMG object with no src set in advance. In addition to the ugly, code redundancy, if the user browser does not support Javascript, not only can not use this feature, but also to accept the page will never show a broken image. To solve this problem, you need to regenerate the IMG object at runtime, either through the DOM.
<form name= "FORM5" id= "FORM5" method= "Post" action= "#" >
<input type= "File" Name= "File5" id= "File5"
Onchange= "preview5 ()"/>
</form>
<script type= "Text/javascript" >
function Preview5 () {
var x = document.getElementById ("File5");
if (!x | |!x.value) return;
var patn =/\.jpg$|\.jpeg$|\.gif$/i;
if (Patn.test (X.value)) {
var y = document.getElementById ("Img5");
if (y) {
Y.SRC = ' file://localhost/' + x.value;
}else{
var img=document.createelement (' img ');
Img.setattribute (' src ', ' file://localhost/' +x.value);
Img.setattribute (' width ', ' 120 ');
Img.setattribute (' height ', ' 90 ');
Img.setattribute (' id ', ' img5 ');
document.getElementById (' FORM5 '). AppendChild (IMG);
}
}else{
Alert ("You have chosen a file that does not appear to be an image. ");
}
}
</script>
6. Try the effect:
　　
This is relatively perfect. DOM, like regular expressions, is a practical technique that "packs you don't regret", and if you want to learn more, learn more, or successfully practice Web standards, DOM is essential. From my recent experience, JAVASCRIPT+DOM+CSS contains powerful energy, see how to release it.

7. The last jquery upload preview code:

de><meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" src= "Http://blog.163.com/lgh_2002/blog/jquery.js" ></script>
<script language= "JavaScript" >
$ (function () {
var ei = $ ("#large");
Ei.hide ();
$ ("#img1"). MouseMove (function (e) {
Ei.css ({Top:e.pagey,left:e.pagex}). html (' '). Show ();
}). mouseout (function () {
Ei.hide ("slow");
})
$ ("#f1"). Change (function () {
$ ("#img1"). attr ("src", "file:///" +$ ("#f1"). Val ());
})
});
</script>
<style type= "Text/css" >
#large {position:absolute;display:none;z-index:999;}
</style>
<body>
<form name= "Form1" Id= "Form1" >
<div id= "Demo" >
<input id= "F1" name= "F1" type= "file"/>

</div>
<div id= "Large" ></div>
</form>
</body>

Preview of images before uploading (PHP)