Browser image selection Preview, rotation, bulk upload JS code to achieve _javascript skills

Work encountered in the business scene, and colleagues to study the next, mainly for compatibility with the IE version

In fact, some trivial points of knowledge in the online collection under the solution, and then integrated under, mainly has the following points:

1. IE input Type=file picture preview to use IE's filter css

Progid:DXImageTransform.Microsoft.AlphaImageLoader

Chrome/firefox the file reader for the file API

2. Picture rotation, IE with Progid:DXImageTransform.Microsoft.Matrix filter (filter can be combined, separated by a space)

Chrome/firefox with Canvas

3. Upload pictures, I use is not visible in the iframe form dynamic add input[type=file] to achieve. Chrome/firefox can use XHR, but I'm too lazy to change it.

4. In order to achieve the upload image does not refresh this page, but also to select files repeatedly, so the use of an IFRAME dedicated maintenance of a input[type=file] list, more Shang.

can refer to the following code, mainly a main HTML, and then two iframe HTML, upload the server to return the data for the uploaded successful file name, used to delete the preview map.

Copy Code code as follows:

Upload Callback
Resultlist-> [' file1 ', ' file2 '] for uploading the successful file name
var uploadcallback = function (resultlist) {
Console.log (Json.stringify (resultlist));

            var i = 0;
            for (; i < resultlist.length; i++) {
                var index = resultlist[ I].substr (' file '. length);
                $ (': checkbox[ Value= ' + index + ']. Parent (). Parent (). remove ();
           }
       };

$ (function () {
Saves the angle of the picture rotation for submission to the service-side processing
var Rotateang = {};
Ordinal number used to name the suffix
var cc = 0;

If it is chrome/ff, you need to use the file API to generate img
var genimgtpl = function (input, index) {
Return ' ';
};

var readimgfrominput = function (_input, index) {
var inputdom = _input[0];
Chrome/ff
if (inputdom[' files ']) {
var reader = new FileReader ();
Reader.onload = function (e) {
$ (' Img.main:last '). attr ({src:e.target.result});
}
Reader.readasdataurl (inputdom[' files '][0]);
}else{
var src = _input[0].value;

var imgdom = $ (' #img ' + index);
Imgdom.attr (' Src-old ', SRC);
Imgdom.css ({
float: ' Left ',
Position: ' Relative ',
Overflow: ' Hidden ',
Width: ' 195px ',
Height: ' 195px '
});

Imgdom.css ({' Filter ': "Progid:DXImageTransform.Microsoft.AlphaImageLoader" (enabled= ' true ', sizingmethod= ' scale '), Src=\ "" + src + "\") "}";
}
};

var showimg = function (_input) {
var index = ++CC;

_input.addclass (' hide ');
_input.attr (' name ', ' file ' + index);
_input.attr (' Data-index ', index);

var Iframewin = $ (' #choose ') [0].contentwindow;
Iframewin.addinput (_input);

                var tpl = ' <div > ' + GENIMGTPL (_input, index) +
                     ' <span class= "choose" ><input type= "checkbox" value= "' + Index + '" Checked= "true"/></span> ' +
                     ' <span class= "opts turn-right" ></span> ' +
                     ' </div> ';
                $ (' #imgDiv '). Append (TPL);

                Readimgfrominput ( _input, index);
           };
            var addanother = function () {
                 $ (' #uploadBtn '). Before (' <input type= "File" name= "file"/> ');
           };

Binding events for Input[type=file]
$ (' #uploadDiv input '). Live (' Change ', function () {
var path = This.value;
if (!path) {
Return
}

Showimg ($ (this));
Addanother ();
});

           //can remove input at checkbox time
//             $ (' #imgDiv Input:checkbox '). Live (' Change ', function ( ) {
//                var isChecked = $ (this). Is (': checked ');
//                Console.log ( ischecked);
//           });

$ (' #imgDiv span.turn-right '). Live (' click ', function () {
Angle of last rotation
var index = $ (this). Siblings (' Span.choose '). Find (' input '). Val ();
var Oldang = Rotateang[index] | | 0;
var Newang = Oldang + 90;
Rotateang[index] = Newang;

$ (' #img ' + index). Rotate (90);
});

           /form submission time to delete the Choose input[type= according to the checkbox File]
            $ (' #uploadBtn '). Click (function () {
                var choosednum = $ ( ' #imgDiv input:checkbox '). Filter (': Checked '). Length;
                if (!choosednum) {
                     alert (' Please select Upload file! ');
                     return false;
               }

               //Selected ordinal array
                var choosedindexlist = $ (' #imgDiv input:checkbox '). Filter (': Checked '). Map (function () {
                     return this.value;
               }). Get ();

               //Two IFrame, One for saving the selected Input[type=file]
                //one for form upload
                 var uploadiframe = $ (' #upload ') [0].contentwindow;
                var chooseiframe = $ (' #choose ') [0].contentwindow;

var i = 0;
for (; i < choosedindexlist.length; i++) {
var index = choosedindexlist[i];
var inputfile = chooseiframe.$ (' #uploadDiv input '). Filter (' [data-index= ' + index + '] ');
uploadiframe.$ (' #uploadForm '). Append (Inputfile);

Rotation degree
var ang = Rotateang[index] | | 0;
if (ang% 360!= 0) {
var tplinput = ' <input type= ' hide ' name= ' ang ' + index + ' value= ' + ang + ' '/> ';
uploadiframe.$ (' #uploadForm '). Append (Tplinput);
}
}

Uploadiframe.doupload ();

return false;
});
});

Tests in IE7, 8, 9 and chrome are fine