How to upload a picture in asp.net MVC 3

Picture upload a lot of plug-ins, but many times still can not meet our needs, I here to share with a form,file I upload four photos of small demo. Completely using jquery before and after interaction, no plug-ins.

The final effect figure is as follows:

Play the flower field people may be a little familiar, the prototype is from the Flower field network picture upload.

The referenced scripts are:

<script src= ". /.. /scripts/jquery-ui-1.9.2.custom.min.js "></script>
  <script src=". /.. /scripts/jquery-1.8.3.js "></script>
  <link href=". /.. /content/bootstrap/css/bootstrap.min.css "rel=" stylesheet "  />
  <script src=". /.. /content/bootstrap/js/bootstrap.min.js "></script>  <script src=". /.. /content/js/form.js "></script>

Basic idea: The user clicks the related div triggers the file element to open the browsing box----"uses the setinterval unceasingly to detect whether the file file selects files---" After selecting, triggers the form to automatically submit to backstage---" The background stores the file to the temporary folder return picture in the Temporary folder address---window prompts the upload function and previews the picture---"The user clicks publishes---" The Backstage Saves the picture (moves to the designated folder, and stores the database)

The entire process form and file are hidden. The other effect

1. Initially display only one upload box, the previous upload completed, display the next upload box. And always appear on the last side.

2. You can submit and enter a description when you have a picture.

3. Upload after successful, delete to upload again.

Html+css

. uploadbox {float:left;width:115px;height:115px;
            Background-color: #eeeeee;
            Margin-right:10px;color:white;text-align:center;cursor:pointer;
        Position:relative;display:none;
        }. uploadbox:hover {background-color: #b4b4b4;
       }. stt{Font-size:xx-small;display:block;}
      . add{Vertical-align:baseline;display:block;height:auto;font-size:8em height:40px;padding:10px;margin-top:30px}
        . imgcontainer{width:100%;height:100%}. Imgcontainer img{max-height:115px;max-width:115px;
        . inputdiv{clear:both;display:block;padding-top:10px;}
       #Remark {width:478px;} . Infospan{display:none Height:20px;position:absolute;bottom:0;right:0;width:100%;background-color: #00bfff;
       z-index:1;clear:both;opacity:0.8;} . Closespan{display:none position:absolute;right: -7px;top: -7px;width:14px;height:14px;border-radius:7px; Background-color:white;border:1px Gainsboro Solid;color:gray;
           Font-weight:bold;font-size:medium;
       line-height:16px;
       }. closespan:hover{color:red;}       
       #imgupload form{Display:none;}
       . imguploadmessage{font-size:small;color:green;float:left;margin-left:10px;}  
           . carclose{Cursor:pointer;
           Background-color:white;opacity:1;
           Position:absolute;z-index:99;top:0px;right: -40px;
           Width:40px;height:40px;border-radius:20px;text-align:center;
       Line-height:40px;font-size:2em;color:gray; }.carclose:hover{Color:green;background-color: #eeeeee}

<div id= "Imgupload" class= "Modal Hide Fade" tabindex= "-1" role= "dialog" aria-labelledby= "Mymodallabel" aria-hidden= "True" > <div class= "Modal-header" > <button type= "button" class= "Close" data-dismiss= "modal" "Aria-hidden=" true >&times;</button>