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

ASP.Net MVC 3中如何上传图片2014-08-19图片上传的插件很多，但很多时候还是不能切合我们的需求，我这里给大家分享个我用一个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>