本帖最后由 李维强-15级 于 2017-4-1 22:13 编辑
上传图片到服务器,手写JS练习。研究了我好一段时间,主要还是对razor和jQuery不熟
这里给出例子主要是前端的,就是说文件在用户本地的时候,上传了立马展现出来,只要他不点上传以前,都不管服务器的事情。
主要实现功能是动态新增图片预览,每个图片右上角配删除字样,可以点击删除。另附后台MVC代码。
由于另外的包括文件大小验证,后缀名验证等,前后台都要做,后面再加上。
下面直接上前端代码:
[HTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode @using (Html.BeginForm("Upload", "Test", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div id="DIV_picField">
<div onclick='btnAction(this)' class='UploadPicPlus' style='position:relative;display:inline-block;height:100px;width:100px;background-image:url(../../Content/upImg/IMGEmpty.png);'>
<input type="file" name="ImgUpload" style='position:absolute;bottom:2px;display:none;' onchange="FileSelected(this)" />
</div>
</div>
<input type="submit" value="picUp" name="myPicUp" />
}
<script type="text/javascript">
var PicCount = 1;
function btnAction(obj) {
$(obj).children("input")[0].click(this);
PicCount++;
}
function btnDel(obj) {
$(obj).parent().remove();
}
function FileSelected(obj) { //文件选择后的相应函数
//先获取一个文件
var UpIMG = obj.files[0];
//把删除字样加到DIV右上角
$(obj).parent("div.UploadPicPlus").append("<span style='position:absolute; right:2px;font-size:20px;cursor:pointer;' onclick='btnDel(this)'>删除</span>");
//改变DIV的背景,使得看起来是一张图片
$(obj).parent("div.UploadPicPlus").css("background-image", "url(" + window.URL.createObjectURL(UpIMG) + ")");
//去除DIV的onclick事件
$(obj).parent("div.UploadPicPlus").removeAttr("onclick");
//再加一个 图片输入框到刚才那个旁边
$("#DIV_picField").append("<div onclick='btnAction(this)' class='UploadPicPlus' style='position:relative;display:inline-block;height:100px;width:100px;background-image:url(../../Content/upImg/IMGEmpty.png);'>"
+ "<input name='ImgUpload' style='position:absolute;bottom:2px;display:none;' type='file' onchange='FileSelected(this)' /></div>");
}
</script>
然后是后端 这里用razor
[C#] syntaxhighlighter_viewsource syntaxhighlighter_copycode //先要到model里面定义个类,由于是接受多个文件,所以用了个list,网上他们用的IEnumerable,暂时还不明白区别,
public class FileUploadViewModel
{
public List<HttpPostedFileBase> ImgUpload {get;set;}
public string upValue { get; set; }
}
然后在controller里面直接这样写即可
[C#] syntaxhighlighter_viewsource syntaxhighlighter_copycode [HttpPost]
public ActionResult Upload(FileUploadViewModel file)
{
//这里文件直接到file里面来了用file.XXX.XXX来取然后操作
return RedirectToAction("Test", "Test");
}
本文关键点,过了太多坑才有如上代码
1)model里面的变量名ImgUpload 要和input里面的name一样,不然razor收不到数据。
2)form表单里面 一定要有enctype = "multipart/form-data"属性
3)$(obj).children("input")[0] 我通过调试,在浏览器里面看到实际上那些parent或者children方法实际上是得到一个obj 这个obj里面有各个元素,所以我用[0]来索引到指定元素,实际上通过页面代码看到也只有一个元素。。
4)特别是parent("div.UploadPicPlus")的时候,如果夫级是div,则要把选择器加个div.XXXX这样才可以append,CSS等操作。我看人家都没这么做,但是我只有这么做了才可以成功。。。。
5)relative和absolute的定位使用区别 夫级用relative 子级用absolute定位
最终效果
|