Show in img After selecting a local photo (Customer experience)

Recently moved to the MVC project, and then again encountered the implementation of the photo upload, before the use of ASP, although there are photo uploads, and for the customer experience,

It also enables the selection of local photos immediately after the display in the IMG, here is a brief introduction to its implementation (ASP), the code is no longer written

• Asp. NET implementation (using server control upload at that time):
  • An IMG control, a upload control
    • First create another new ASP. NET page, upload the photo, the photo upload displayed on this ASP, and then the IMG src link to this page O (method is very stupid, but just came out is so implemented, now can be implemented with plug-ins)
• MVC implementation method (using file in input)
  • An IMG tag, a file tag
    • Implementation method

    •     //read the picture and display it to IMGfunction ReadFile () {varFile = This. files[0]; if(!/image\/\w+/. Test (File.type)) {Alert ("the file must be a picture! "); return false; }        varReader =NewFileReader ();        Reader.readasdataurl (file); Reader.onload=function (e) {$ ("#ComPic"). attr ("src", This. Result); }} $ (function () {varinput = document.getElementById ("Filetoupload"); //first determine if the browser supports FileReader//The label of the selected photo is disabled when the browser is not supported        if(typeofFileReader = = ='undefined') {alert ("Sorry, your browser does not support FileReader"); Input.setattribute ('Disabled','Disabled'); } Else{Input.addeventlistener (' Change', ReadFile,false); }    });
      

    • Here, you can display the image after selecting it, but it is important to note that the following version of IE6 (including IE6) is not supported for FileReader
    • then the image is uploaded (here, I'm using an asynchronous upload operation, and the database is saved in the picture path, and the picture is uploaded to the specified folder)

      varFileobj = document.getElementById ("Filetoupload"). files;varFilecontroller = "/member/shop/uploadimg" + "? Picname= "+ picname +" &pictype= "+Pictype;varform =NewFormData (); for(vari = 0; i < fileobj.length; i++) Form.append ("File" +I, fileobj[i]); varXHR =NewXMLHttpRequest (); Xhr.open ("Post", Filecontroller,true); Xhr.onload=function () {              if(Xhr.status = = && Xhr.responsetext = = "1") {alert ("Photo Upload is successful!"); } Else {
      The message returned when the picture was uploaded unexpectedly alert (xhr.responsetext);                }                }; Xhr.send (form);

• There is another way to achieve, is to use uploadify, you can achieve bulk upload pictures or files, including the progress bar, the plug-in official document has been described in detail, in this no more said.

Show in img After selecting a local photo (Customer experience)