H5 upload image canvas, use canvas to process compressed images and upload
HTML code:
<formAction=""Method= "POST"> <DL> <DD> <Div> <DivID= "Img_wrap"> </Div> <inputtype= "File"Accept= "Image/jpg,image/jpeg,image/png,image/gif"ID= "Fileimage"multiple= "multiple"name= "img"style= "Display:none" /> <aID= "Upimg"href= "javascript:">Upload image</a> </Div> </DD> <DDstyle= "margin-top:10px;"> <aID= "Abtn_submit"href= "javascript:">Submit</a> </DD> </DL></form>
JS Code:
<script type= "Text/javascript" > $ (Function () {$ ("#abtn_submit"). Click (function () {if ($ () Put[name= ' IMGs '). Length < 1) {Layer.open ({content: ' must upload image to submit '), Skin: ' msg ', time:2}); Return } $ ("form"). Submit (); }); $ ("#upimg"). Click (function () {$ ("#fileImage"). Click (); }) $ ("#fileImage"). Change (function () {$.each ($ (this) [0].files, function (i, E) {if (!/ Image\/\w+/.test (E.type)) {//Make sure the file is an image type return; } imghandle (e); }) }) }); function Imghandle (_file) {var reader = new FileReader (); Reader.readasdataurl (_file); Reader.onload = function (e) {var result = E.target.result; var image = new Image (); IMAGE.SRC = ResulT Image.onload = function () {var CVS = document.createelement ("Canvas"); var scale = 1; if (This.width > | | this.height > +) {if (This.width > This.height) { scale = 1000/this.width; } else {scale = 1000/this.height; }} cvs.width = This.width * scale; Cvs.height = this.height * scale; var ctx = Cvs.getcontext ("2d"); Ctx.drawimage (this, 0, 0, cvs.width, cvs.height); var newimagedata = Cvs.todataurl (_file.type, 0.8); var imgdata = "<a href= ' javascript: ' onclick= ' delimg (this) ' > "; Imgdata + = "<input type=\" hidden\ "name=\" Imgs\ "value=\" "+ newimagedata +" \ "/></a>"; $ ("#img_wrap"). Append (Imgdata); }}} function Delimg (e) {Layer.open ({content: ' Are you sure you want to delete this picture? ', btn: [' delete ', ' Cancel '], skin: ' Footer ', yes:function (index) {$ (E). Remove ( ); Layer.close (index); } }); }</script>
Background processing code:
The picture is handled as follows string[] IMGs = collection. GetValues ("IMGs"); list<u_img> uimglist = new list<u_img> (); int i = 1; foreach (String imgbase64str in IMGs) {int indexOf = Imgbase64str.indexof ('/') + 1; String ftype = Imgbase64str.substring (indexOf, Imgbase64str.indexof (';')-indexOf); String fex = ". jpg"; Switch (ftype) {case ' JPEG ': case ' jpg ': fex = ". jpg"; Break Case "png": Fex = ". png"; Break Case "gif": Fex = ". gif"; Break } String base64str = Imgbase64str.substring (Imgbase64str.indexof (', ') + 1); Base64str = Base64str.trim (' + '); byte[] Imgarr = convert.frombase64string (BasE64STR); using (MemoryStream ms = new MemoryStream (Imgarr)) {Bitmap bmp = new Bitmap (MS); String fname = "/timg/" + DateTime.Now.ToString ("yymmddmmhhssffff") + i.tostring () + Fex; String FilePath = Request.mappath (fname); Bmp. Save (FilePath); Uimglist. ADD (New U_img () {Imgurl = fname, imgtime = DateTime.Now}); } i++; }
H5 upload a picture of canvas