ASP.Net MVC 3中如何上传图片

图片上传的插件很多，但很多时候还是不能切合我们的需求，我这里给大家分享个我用一个form,file实现上传四张图片的小demo。完全是用jquery前后交互，没有用插件。

最终效果图如下：

玩过花田人可能有些眼熟，原型就是来自于花田网中的图片上传。

引用的脚本有：

<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>

基本思路：用户点击相关div触发file元素打开浏览框----》用setInterval不断检测file文件是否选中文件---》选中之后触发form自动提交到后台---》后台将文件存储到临时文件夹返回图片在临时文件夹的地址---》窗口提示上传功能并预览图片---》用户点击发布---》后台保存图片(移动到指定文件夹,并存入数据库)

整个过程form和file都是隐藏的。另外的效果

1. 开始的时候只显示一个上传框,前一个上传完成后，显示下一个上传框。并总是显示在最后面。

2. 有图片的时候才能提交和输入描述。

3.上传成功之后,删除后才能再次上传。

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>
            <h4>上传图片</h4>
        </div>
        <div class="modal-body">
            <div class="uploadbox" data-count="0" style="display: inline;">
                <span class="closespan" title="删除照片">&times;</span>
                <div class="imgcontainer">
                    <div class="add">+</div>
                    <div class="stt">点击上传</div>
                </div>
                <span class="infospan">
                    <img src='../../Content/Photos/loading.gif'  />正在上传...</span>
            </div>
            <div class="uploadbox" data-count="0"  >
                <span class="closespan" title="删除照片">&times;</span>
                <div class="imgcontainer">
                    <div class="add">+</div>
                    <div class="stt">点击上传</div>
                </div>
                <span class="infospan"> <img src='../../Content/Photos/loading.gif'  />正在上传...</span>
            </div>
            <div class="uploadbox"data-count="0" >
                <span class="closespan" title="删除照片">&times;</span>
                <div class="imgcontainer">
                    <div class="add">+</div>
                    <div class="stt">点击上传</div>
                </div>
                <span class="infospan"> <img src='../../Content/Photos/loading.gif'  />正在上传...</span>
            </div>
            <div class="uploadbox"data-count="0"  >
                <span class="closespan" title="删除照片">&times;</span>
                <div class="imgcontainer">
                    <div class="add">+</div>
                    <div class="stt">点击上传</div>
                </div>
                <span class="infospan"> <img src='../../Content/Photos/loading.gif'  />正在上传...</span>
            </div>
            <div class="inputdiv"><input type="text" disabled="disabled" id="Remark" name="Remark" placeholder="补充说明下~" /></div>
        </div>
            <div class="modal-footer">
             上传大小在8k-10M之间 <span class="imguploadmessage"></span>
              <button class="btn btn-success "  disabled="disabled"   id="imgsubmit">发布</button>
              <form action="/User/UpLoadPhoto" method="POST" enctype="multipart/form-data" name="ImgForm" id="ImgForm">
              <input type="file" name="file" id="imgFlie"  required="required"  />
              <input type="submit" name="subt" value="上传图片"  />
              </form>
            </div>

    </div>

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索上传图片文件
， 图片
， display
， 上传图片
， 图片上传
， color
， px
， stt mram
， imgupload
， height
， 后台上传图片
， MVC图片上传
， MVC图片预览
font-size
，以便于您获取更多的相关知识。