Tangled upload control, ah! A painful understanding

If it is wrong, or if it is wrong, please help me to make it out. I will make some corrections, and it will be a little bit of progress !~

 

Before text

I don't know whether it's the brain of the upload control or the lack of my head in the afternoon. In this case, I don't know whether it is a common form.

End before text

Today's Sun is shining (throw! Great wind !), A bug waiting for testing with pleasure. I am personally confident that there is a bug (fall! The MB module tests 6 bugs ). I did not expect the first bug to come out. This bug is also a slight point in this article, so I will not mention it. When 3rd bugs came out, I realized that this afternoon was disastrous.

The problem occurs on the upload control. In order to interact with the backend, the upload control is decisively dragged. The customer needs to Click Upload control to browse

Yes

To display this image, of course, this image is excellent if it is not uploaded (throw !)

Well, with the idea that the customer is God, I wrote the following JS Code.

$ (Function () {$ ("# fileupimg "). change (function () {var Turl = $ ("# xxoo "). val (). replace (': \', '^ '). split ('^') [1]; var location = "file: //" + Turl; var type = location. substr (location. lastindexof (". ")). tolowercase (); var IMG = new image (); If (type = ". jpg "| type = ". GIF "| type = ". JPEG "| type = ". BMP ") {IMG. src = location; IMG. onload = function () {If (IMG. width <1355 | IMG. width> = 1365) {alert ("the width of the uploaded image must be between 1355 and 1365 pixels"); return;} If (IMG. height <1015 | IMG. height> 1025) {alert ("the height of the uploaded image must be between 1015 and 1025 pixels"); Return ;}$ ("# yiku "). ATTR ("src", location); $ ("# yiku "). show () ;}} else {alert ("the image format is incorrect! ");}})});

This piece of code is problematic during the writing phase (TMD, I had to test whether the drive letter can be displayed at that time)

There are no problems with uploading images on the desktop. Of course, there may also be problems.

The tester told me that the uploaded image is not displayed. I was wondering why. I asked her for a test image. I tested it and found that the desktop could not be displayed, and the source code was not the same as I imagined. At this time, I am thinking about the reason. The first thing that comes into my mind is the permission issue.

Does the browser have the permission to read and write users' hard disk information? In other words, does JS have the permission to operate hard disk information? I think it should be none, but why can I get the desktop image from the local source code? I think it may be because I tested it locally and the local preview has something to do with it, I hope that Daniel can help me solve this problem.

After 1 minute 1 second, I suddenly thought that what should I do if this method fails. Some viewers may say they use a third party. The third party won't be used, and I also need to know the size of the uploaded image. You can see in the code above that I need to determine the size to determine whether to upload the image. At this time, I remembered my dear Google. Search for countless keywords on Google, and finally find a keyword, filter.

JS and filters? This is the first time I heard that meitu xiuxiu was written in Js?

Google's solution is nothing more than loading images through filters. I have finally found a solution! Code on !~

Imgdiv. style. width = "required"; imgdiv. height = "required"; imgdiv. style. filter = "progid: DXImageTransform. microsoft. alphaimageloader (sizingmethod = scale) "; imgdiv. get (0 ). filters. item ("DXImageTransform. microsoft. alphaimageloader "). sizingmethod = "image ";

This is the key code. After testing, this code is available when the browser security level is very low. If your customer's browser security level is very low, you can use this section.

Sizingmethod = scale is used on the Internet. If there is no semicolon, the container will expire if there is a semicolon. The consequence of container failure is that the original size is displayed after the image is displayed.

Of course, I said that it is okay when the browser security level is low, and the default browser security level is medium or medium-high.

This involves an attribute.

This attribute changes the upload control path to X: \ fakepath \ file name, you can see that he has covered up the real path (the browser has covered up the truth !!!). The general idea is that the browser needs to be secure and the path is secured from IE7.

So what should we do. We can write it when getting the physical path

The following section

            var file = document.getElementById('XXOO');            file.select();            file.blur();
            var a= document.selection.createRange().text;

In this way, you can get the real path, and then you can do what you want to do, so that the Code with the low security level of the browser above can be used (I did not test, but it should be okay ).

Next, I want to face another problem. I cannot get the width and height of the image. Of course, some guest officials have said that you have obtained the real address. How can you not obtain the width and height? I did not test it, but it should not. In the security policy after IE7, the local file attributes cannot be obtained.

At this time, it is almost the end of work. I still want to go home from work to play Xbox. There is no way to reflect the situation truthfully. Later, I was asked to make rectification within a time limit. when selecting an image, I could upload it, but there was an upload button and the page could not be refreshed. Of course, this was a simple solution (ah? You don't? I can't solve it by thinking about it ).

The final solution is to upload an image.

Some people also asked why the upload was not allowed during the design? Because this upload involves a lot of things, the performance will be much lower if one upload is complete, and a lot of I/O reads and writes will be required. The current upload is to upload the file to the Temporary Folder. When you confirm the data, delete the file in the Temporary Folder instead of multiple I/O reads and writes. Performance is improved.

It's almost 9 o'clock to solve these problems. The following bugs were all dumbfounded and neglected, which turned my face red ..

I learned this knowledge in the afternoon. I think it is very good. At least I know the security policies and several upload methods of IE browser.

Today is a wonderful day.

The above code is IE 7 8 9 and other browsers are not tested.

PS: there is also an HTML5 method that is also very interesting. This is provided by friends in the group for me.

 1 <style> 2   .thumb { 3     height: 75px; 4     border: 1px solid #000; 5     margin: 10px 5px 0 0; 6   } 7 </style> 8  9 <input type="file" id="files" name="files[]" multiple />10 <output id="list"></output>11 12 <script>13   function handleFileSelect(evt) {14     var files = evt.target.files; // FileList object15 16     // Loop through the FileList and render image files as thumbnails.17     for (var i = 0, f; f = files[i]; i++) {18 19       // Only process image files.20       if (!f.type.match('image.*')) {21         continue;22       }23 24       var reader = new FileReader();25 26       // Closure to capture the file information.27       reader.onload = (function(theFile) {28         return function(e) {29           // Render thumbnail.30           var span = document.createElement('span');31           span.innerHTML = [''].join('');33           document.getElementById('list').insertBefore(span, null);34         };35       })(f);36 37       // Read in the image file as a data URL.38       reader.readAsDataURL(f);39     }40   }41 42   document.getElementById('files').addEventListener('change', handleFileSelect, false);43 </script>