Image upload and display (with multiple files)

A period of time to use the file upload, not long ago to write this thing, and some things have also Forgotten. So this blog BZ decided to record, on the one hand to review the deepened, on the other hand for the programmer to Learn.

I hope the great gods will criticize the wrong place in this article!

In our HTML page, write the text box of the uploaded file and the div where the picture is displayed, as Follows:

1<divclass="Form-group">2<labelclass="col-sm-2 Control-label no-padding-right"Id="lb_topimg"> Top picture: </label>3<divclass="col-sm-4">4<a href="javascript:;" class="A-upload">5<input type="file"Id="topimg"Name="topimg"Onchange="ajaxfileupload (' topimg ', ' img_topimg ', 2)">Click here to upload a picture6</a><span style="color: #EC2020; font-size:10px">[suggest Uploading Pictures 208px*160px]</span>7</div>8<divclass="col-sm-3"Id="img_topimg">9 Ten</div> one</div>

View Code

BZ in the image upload to use ajax, and pass more than three parameters, paste the following JS calling code Block:

1 function Ajaxfileupload (id, contentid,imgid) {2 $.ajaxfileupload3     (4{//<input type= "file" id= "farmlogo" name= "farmlogo" onchange= "ajaxfileupload (' farmlogo ', ' Img_farmlogo ', 1)" > 5Url:'.. /handler/datahandler.ashx',//server-side request address for file uploads6Secureuri:false,//generally set to false7fileelementid:id,//file upload Space id attribute <input type= "file" id= "file" name= "file"/>8             //dataType: ' json ',//The return value type is generally set to JSON9Success:function (data, Status)//Server Success Response handler functionTen             { one                 varobj = eval ('('+ $ (data). Text () +')'); a$("#"+ contentid). HTML (""); -$("#"+ contentid). Append ("<div class= ' open ' style= ' width:100px;height:50px;float:left; ' >"+ ContentID + imgid"' class= ' img-responsive ' style= ' width:100px;height:50px; ' src= '"+ OBJ.MSG.PICURL +"'/> </div><input id= ' hhimg"+ ContentID + imgid"' name= ' Imgurl"+ Imgid +"' value= '"+ OBJ.MSG.PICURL +"' type= ' Hidden '/>") -             }, theError:function (data, status, E)//Server Response Failure handler function -             { - Alert (e); -             } +         } -     ) +     return false; a}

View Code

Here is the reason for uploading three parameters: the ID of input is to distinguish the grouping of pictures (assuming that you want to upload two sets of images), the div ID is to determine which div the picture will be displayed in.

Attach the Server-side request address code Block:

 public voidProcessRequest (httpcontext Context) {//Context.            Response.ContentType = "text/plain"; //Context.                     Response.Write ("Hello world"); //Write your handler implementation Here. httpfilecollection files =Context.            request.files; if(files! =NULL&& Files. Count >0) {httppostedfile file= files[0]; stringTmppath = Context. Server.MapPath ("/upload/"); stringFileName = DateTime.Now.ToString ("yyyymmddhhmissfff") +System.IO.Path.GetFileName (file.                FileName); File. SaveAs (tmppath+fileName); Context.                Response.Clear (); Context. Response.Write (@"{status: ' success ', msg: {picurl: '"+"/upload/"+ FileName +@"'}}"); Context.            Response.End (); }        }

View Code

The name format of the picture is the date of the month + Picture. Upload is to upload the image in the upload folder.

See here everyone should understand, the emphasis is coming!!!

How many pictures to upload it?? In fact, it is very simple to comment out a sentence in the second block of code ok!

$ ("#" + contentid). HTML ("");

The div where the picture is going is no longer empty!!

Can write a JS specified image path storage, using a circular way to save the selected picture path in the database! Done!

Thank you for watching this blog, I hope more and I like the same side of the positive learning, also hope that the great god of this blog's shortcomings in the comments! Thank you!

Image upload and display (with multiple files)