如题,我想在页面点击添加按钮,就出现客户端的file控件,并且后面跟着个删除按钮。 和显示图片的的div???
要求是:
      第一个file控件不能删除,也就是后面没有删除按钮。这个简单,
      关键是      
     1、 往后的每个都是带有删除按钮的。并且带有div显示你选择的图片的缩略图。
     2、 删除当前的file控件下方控件上移。
各位大侠们,后台添加上传图片小弟已完成,能不能给写个详细点的代码,小弟没学Js,不是很懂。谢谢了。

解决方案 »

  1.   

    用jquery写的一个,楼主演示的时候,要导入jquery库。希望对楼主有帮助!
    <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>
      

  2.   

    if (parseInt(shu) > 1) {
                    $("#content").remove();
                }
    刚刚点删除测试发现,删除的并不是本行,有一点bug。里面的代码修改成 $(this).parent().remove();就好了。删除的就是当前这行了。
      

  3.   


    parseInt 最好指定一下进制!
    parseInt(string, radix)
    string 必需。要被解析的字符串。 
    radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。
    如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头,将以 16 为基数。如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN。 一般是用10进制。 
      

  4.   

    补充,之前使用服务器端控件弄得,上传图片能实现,但HTML标签好像不好用,还有用js控制出现的控件,我给他们加了个变量i,每次加一,这样确保每次名字不同,但是,若删除了,后台上传遍历的时候有错 ,,,请指点下下。
      

  5.   

    我给他们加了个变量i,每次加一,这样确保每次名字不同,但是,若删除了,后台上传遍历的时候有错 ,,,html控件有点不好操作。楼主就用服务器控件操作。不用考虑浏览器兼容性。
    在后台的时候,首先获取所有的file控件,然后再循环操作,批量上传图片就可以了,上面的情况就不会出现了。百度上面有这样的例子!
      

  6.   

    谢谢大侠了,不过我是用js动态生成file控件的,好像也只可以生成html控件,服务器端不会。现在怎样获得html控件我是用request.form[""];来获取的,不过这样往下就没思路了。大侠,不用服务器端的,那种我做完一边了,但效果不是师傅要的效果,能否给点代码,或者是思路。。
      

  7.   


    我以前是这样获取客户端file控件的,下面的files是集合类型
     System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
      

  8.   

    大侠,我试了一下,你看我这样又不对的地方吗??
     System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;            foreach (var item in files)
                {
                    Response.Write(item);
                }
    如果对了,没出效果啊。
      

  9.   

    就直接给楼主想要的TAG下添加对应type="file"的子TAG就OK了.
      

  10.   

    把file控件换成服务器控件就可以了,远行效果是一样的。下面有个例子,供你参考,网上有相应的例子。 
    //判断上传文件是否包含文件
      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);
    }
    }
      

  11.   

    上面的是后台代码。处理批量上传的。至于前台,把html的file控件,换成服务器的。其它的搞楼主自己解决了!