Preview the local picture to upload

Upload

Uploading files is a very common web application, especially when uploading images. Today we'll talk about this topic in the context of the Web standards (the front-end, of course, not the upload), the key words are: Javascript, Dom and Firefox.

Form

First create a file form field that we need to use to browse the local file.

<form name= "Form1" Id= "Form1" method= "Post" action= "upload.php" > <input type= "file" Name= "File1" id= "File1"/& Gt;</form>

Try the effect:

　　

Determining File Types

When the user selects a picture file, we want him to see the thumbnail of the image immediately so that he can confirm that he did not upload his own light butt image to our server ^_^.

Before previewing, we have to decide whether the user chooses an image file, and if he wants to use a. rar file to do avatar, we also need to be polite to remind.

/></form>

JavaScript function Implementation, note that we use Dom method getElementById to access the object. Do not use form again

and input's Name property to access the object, only IE to do 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 (" The image file you chose is not. ");  } else{   alert ("through");  } </script>

Try the effect:

　　

Here's a question, if the user chooses a file named "Fake.jpg.txt", the script still thinks it's a legitimate image file. A workable solution is to first convert the file name to lowercase, and then take the last 4 to 5 bits of the file path to determine if the file extension is indeed the image file extension that we support. However, this scheme is slightly clumsy, there is no sense of beauty, we change a scheme: "Regular expression" to determine the file name 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 chose not to appear as an image file.") ");  } } </script>

Look at the effect (you can create a "fake.jpg.txt" file to try):

　　

If you have never been exposed to regular expressions, then this script may be a bit obscure to you, and Google one to see if you can learn this knowledge first. I can assure you it takes four or five hours to learn a regular expression is the wisest choice you have made in the last three months ^_^.

Back to this script, even if you can't read the two lines of the regular expression, but the beauty of the entire script is clear: simplicity, directness, and semantic fluency, consistent with the Web Standard's requirement for XHTML, consistent with the innate "perfect" nature of web designers or developers.

JJWW after a long period of time, we turn to the key--

Preview picture

The basic design idea for the preview function is clear: Create an IMG element and assign the value 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"   />
/> </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 chose is not an image file.") ");
}
}
</script>

Try the effect:

　　

If you are using Firefox (or opera), you may find that nothing has happened. 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 the image file does not cause serious security problems. Even the most popular JPEG file that caused Windows to crash recently, the prerequisite for showing it is that the user chose the file himself or that you know the exact path to the file on the user's hard drive. So I think this strategy is likely to come from a "lazy" developer who doesn't want to write more programs to tell whether the local file is an image file or a malicious file, and Firefox's security requirements make them a bit too sensitive.

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

1. In the Firefox address bar, type "about:config”
2. Continue typing "security.checkloaduri”
3. Double-click a line of text listed below to change its value from true to False

Then you can try the preview above again, everything works well! Unfortunately, we can't ask all users to modify this value (not to mention the process of modification is cumbersome), so it doesn't make sense to us. What we can do may be to accept that Firefox cannot preview the local picture as "ridiculous".

Using the DOM to create objects

In the XHTML code above, we added an IMG object without SRC in order to preview the picture. In addition to the unattractive, code redundancy, if the user's browser does not support JavaScript, he will not only be able to use this feature, but also accept the page will never display a broken map. To solve this problem, we need to regenerate this IMG object at runtime, or DOM.

<form name= "FORM5" id= "FORM5" method= "Post" action= "#" >
<input type= "File" Name= "File5" id= "File5"/>
</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 ("What you chose is not an image file.") ");
  }
}
</script>

Try the effect:

　　

This is relatively perfect. I don't explain the specific meaning of these DOM methods, and Google has everything. DOM, like regular expressions, is a practical technique for "package you don't regret", and Dom is essential if you want to learn more, learn more, or successfully practice Web standards. From my own recent experience, JAVASCRIPT+DOM+CSS has a powerful energy that depends on how you release it.