如题,我想在页面点击添加按钮,就出现客户端的file控件,并且后面跟着个删除按钮。 和显示图片的的div???
要求是:
第一个file控件不能删除,也就是后面没有删除按钮。这个简单,
关键是
1、 往后的每个都是带有删除按钮的。并且带有div显示你选择的图片的缩略图。
2、 删除当前的file控件下方控件上移。
各位大侠们,后台添加上传图片小弟已完成,能不能给写个详细点的代码,小弟没学Js,不是很懂。谢谢了。
要求是:
第一个file控件不能删除,也就是后面没有删除按钮。这个简单,
关键是
1、 往后的每个都是带有删除按钮的。并且带有div显示你选择的图片的缩略图。
2、 删除当前的file控件下方控件上移。
各位大侠们,后台添加上传图片小弟已完成,能不能给写个详细点的代码,小弟没学Js,不是很懂。谢谢了。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="f" style="background-color: Red;">
<div id="zhi">
<div id="content">
<input id="File1" type="file" /><input type="button" id="jia" value="添加" /><input
type="button" value="删除" id="jian" /><br />
</div>
</div>
<img src="" alt="" id="fimg" />
</div>
<input type="button" id="tianjia" value="添加" />
</body>
</html>
<script>
$(function () {
//让层隐藏
$("#f").hide();
//跟添加按钮绑定点击事件
$("#tianjia").bind("click", function () {
//点击添加按钮的时候,层显示
$("#f").show();
});
//添加file控件
$("#jia").click(function () {
//克隆id=content下面的元素。添加到id=zhi的div里面
$("#content").clone(true).appendTo("#zhi");
});
//删除file控件操作
$("#jian").click(function () {
//查找上传控件的个数
var shu = $("#f").find("#content").size();
//如果有多,就删除掉
if (parseInt(shu) > 1) {
$("#content").remove();
}
else {
alert("至少保留一个!");
}
});
})
</script>
$("#content").remove();
}刚刚点删除测试发现,删除的并不是本行,有一点bug。里面的代码修改成 $(this).parent().remove();就好了。删除的就是当前这行了。
parseInt 最好指定一下进制!
parseInt(string, radix)
string 必需。要被解析的字符串。
radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。
如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头,将以 16 为基数。如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN。 一般是用10进制。
在后台的时候,首先获取所有的file控件,然后再循环操作,批量上传图片就可以了,上面的情况就不会出现了。百度上面有这样的例子!
我以前是这样获取客户端file控件的,下面的files是集合类型
System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; foreach (var item in files)
{
Response.Write(item);
}
如果对了,没出效果啊。
//判断上传文件是否包含文件
if (FileUpload1.HasFile)
{
/*提供对客户端上载文件的访问,并组织这些文件,它是一个文件的集合.
Request.Files获取客户端上载文件的集合*/
HttpFileCollection filecoll = Request.Files;
//循环上传文件的集合,并上传每一个文件
for (int i = 0; i < filecoll.Count; i++)
{
HttpPostedFile myfile = filecoll[i];
//得到上传的文件名
string prefix = myfile.FileName.Substring(myfile.FileName.LastIndexOf("."));
////设置上传文件的名称
string filename = DateTime.Now.ToString("yyyyMMddhhmmssms") + prefix;
////设置上传的路径
string filepath = Server.MapPath("~/shangchuan") + "/" + filename;
myfile.SaveAs(filepath);
}
}