IE7 previews the Image Upload preview. IE7 is not supported.

Uploading files is a common web application, especially for uploading images. Today, we will talk about the content related to this topic within the scope of the Web Standard (only the front-end part is supported, and the upload implementation is not included). The keywords are Javascript, Dom, and Firefox.

Form

First, create a file form field. 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>

Try the following results:

Determine the file type

When you select an image file, we hope that he can immediately see the thumbnail of the image so that he can confirm that he didn't upload his photo as a portrait to our server ^_^.

Before the preview, we must first check whether the user chooses an image file. If he wants to use a .rar file as an avatar, we also need to politely remind him.

<form name="form2" id="form2" method="post" action="upload.php"><input type="file" name="file2" id="file2"onchange="preview()" /></form>

JavaScript function implementation, note that we use domMethodgetElementByIdTo access objects. Do not useformAndinputOfnameAttribute to access the object. Only IE does this.

<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 ("the image file you selected does not seem to be. ") ;}Else {alert (" via ") ;}</SCRIPT>

Try the following results:

There is a question. If the user selects a file named "“fake.jpg.txt", this script still considers it a legal image file. A feasible solution is to convert the file name to lowercase, and then take the last 4 to 5 digits of the file path to determine whether the file extension is indeed the image file extension we support. However, this solution is a little clumsy, and there is no beauty at all. We use a different solution: to judge the file extension using a regular expression.

<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 ("via");} else {alert ("You selected does not seem to be an image file. ") ;}}</SCRIPT>

To see the effect (you can create a file named fake.jpg.txt ):

If you have never been familiar with regular expressions, this script may be a bit obscure to you. You may as well Google it to see if you can learn this knowledge first. I can assure you that spending four or five hours learning Regular Expressions will be the smartest choice you have made in the last three months.

Back to this script, even if you still don't understand the regular expression lines, the beauty of the whole script is very obvious: concise, direct, and fluent semantics, this is consistent with the Web Standard's requirements for XHTML, and is consistent with the "perfectionist" inherent to web designers or developers.

After the main section of jjww, we will transfer the key --

Preview an image

The basic design idea of the preview function is clear: CreateimgElement, and thenvalueValue assignedimgElementsrcAttribute.

<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 ("what you choose does not seem to be an image file. ");
}
}
</SCRIPT>

Try the following results:

If you are using Firefox (or opera), nothing may happen. Yes, unfortunately, Firefox's security policy does not allow us to display a user's local image file. I don't know why they want to do this. I personally think image files will not cause serious security problems. Even if a popular JPEG file that causes windows crash not long ago, you must ensure that the user selects the file or you know the exact path of the file on the user's hard disk. So I think this strategy may come from a "lazy" developer who doesn't want to write more programs to distinguish whether the local file is an image file or a malicious file, firefox's security requirements make them somewhat overly sensitive.

The only way to display a local file in Firefox is to modify its default security policy:

1. Enter"About: config"
2. Enter"Security. checkloaduri"
3. Double-click a line of text listed below and change its value from true to false.

Then you can try preview, everything works well! Unfortunately, we cannot require all users to modify this value (not to mention the modification process is quite troublesome), so this is meaningless for us. What we can do is accept that Firefox cannot preview local images.

Use Dom to create objects

In the above XHTML code, we added an unspecifiedsrcOfimgObject. In addition to being unsightly and code redundant, if the user's browser does not support JavaScript, he will not only be unable to use this function, but also accept a broken graph that will never be displayed on the page. To solve this problem, we need to generateimgObject, path or 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', '123 ');
IMG. setattribute ('height', '90 ');
IMG. setattribute ('id', 'img5 ');
Document. getelementbyid ('form5 ').Appendchild(IMG );
}
} Else {
Alert ("what you choose does not seem to be an image file. ");
}
}
</SCRIPT>

Try the following results:

This is relatively perfect. I don't want to explain the specific significance of the above Dom methods. Google has everything. Like regular expressions, Dom is a practical technique that never regrets. Dom is indispensable if you want to learn more, learn more, or practice web standards. From my recent experiences, JavaScript + DOM + CSS contains powerful energy, depending on how you release it.