能浏览本地文件,批量上传图片,像QQ空间那样的控件是什么做的,如果有的话给我一个,邮箱是[email protected],在此谢谢了

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
            <title></title>
        </head>
        <script language="javascript">
            function chick(){
                var _count = document.getElementById("files").getElementsByTagName("input");
                var len = _count.length - 1;
                var _obj = _count[len];
                
                var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;
                if (ie) {
                    _obj.click();
                }
                else {
                    var a = document.createEvent("MouseEvents");
                    a.initEvent("click", true, true);
                    _obj.dispatchEvent(a);
                }
                
                var _path = _obj.value;
                alert("得到路径:" + _path);
                var _parent = document.getElementById("path_table").firstChild;
                var row = document.createElement("tr");
                row.setAttribute("id",len);
                var cell1 = document.createElement("td");
                cell1.style.borderBottom = "solid";
                cell1.style.borderBottomWidth = "1px";
                var cell2 = document.createElement("td");
                cell2.style.borderBottom = "solid";
                cell2.style.borderBottomWidth = "1px";
                var _a = document.createElement("a");
                _a.innerHTML = "取消";
                _a.href = "javascript:remove("+len+")";
                var _text = document.createTextNode(_path);
                cell1.appendChild(_text);
                cell2.appendChild(_a);
                row.appendChild(cell1);
                row.appendChild(cell2);            
                _parent.appendChild(row);
                         
            }
            
            function create(){
                //统计现有input
                var length = document.getElementById("files").getElementsByTagName("input").length;
                var _id = "";
                if (length == 0) {
                    _id = "0"    
                } else {
                    _id = length;
                }
                //添加一个新的INPUT
                var _td = document.getElementById("input_td");
                var _input = document.createElement("input");
                _input.setAttribute("type", "file");
                _input.setAttribute("name", "pics[]");
                //alert(_input.getAttribute('name'));
                _input.setAttribute("id", _id);
                
                _td.appendChild(_input);
                
                chick();
            }
            
            function remove(obj) {
                var _rem = document.getElementById(obj);
                var _remt = document.getElementById("path_table").firstChild;
                _remt.removeChild(_rem);
                
                var _inputs = document.getElementById("files").getElementsByTagName("input");
                for (var i = 0; i < _inputs.length; i++) {
                    var tmp = _inputs[i];
                    aler
                    if (tmp.getAttribute("id") == obj) {
                        document.getElementById("input_td").removeChild(tmp);
                        break;    
                    }    
                }
            }
            
            function submitForm() {
             alert("提交 form表单");        
                var _inputs = document.getElementById("files").getElementsByTagName("input");
                for (var i = 0; i < _inputs.length; i++) {
                    var tmp = _inputs[i];
                    alert("已选择文件:" + tmp.value);                
                }
             document.fileupload.submit();
            }
        </script>
        <body bgcolor="white">
            <form name="fileupload" method="post" action="uploadservlet.php" enctype="multipart/form-data">
                <table cellpadding="0" cellspacing="0" border="0" width="600">
                    <tr>
                        <td>
                            文件上传 
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table cellpadding="0" cellspacing="0" border="0" 
                                   width="100%" id="path_table" style="border-bottom:solid; border-bottom-width:1px;">
                                <tr id="first_tr">
                                    <td width="80%" style="border-bottom:solid; border-bottom-width:1px;">
                                        文件路径
                                    </td>
                                    <td width="20%" style="border-bottom:solid; border-bottom-width:1px;">
                                        操作
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input name="button" type="button" onclick="create();" value="选择文件" />
                            <input type="submit" value="提交" onclick="submitForm()"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table cellpadding="0" cellspacing="0" border="0" id="files" style="display:none;">
                                <tr>
                                    <td id="input_td">
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </form>
        </body>
    </html>
      

  2.   

    楼上的不是QQ那种批量上传的效果另外,似乎只有IE能干这种事情吧
      

  3.   

    楼主,试试StorageWebPlug(新颖网络文件上传插件)新颖网络上传插件(StorageWebPlug)是一个支持超大文件(4GB)上传的COM控件, 具备断点续传,文件MD5验证,大大提高上传效率、节省带宽,有详细的上传进度显示,支持多种脚本语言,欢迎下载体验。免费提供JavaScript SDK包。
    产品特点:
    1、 业界领先的设计水平为您带来一流的用户体验。StorageWebPlug免费提供的UI库使您的产品和系统获得更高的品质。
    2、 强大完善的技术为您免去后顾之优。StorageWebPlug完善的JavaScript开发包可以让你更容易的进行开发和整合。
    3、 文件上传使用增强的FTP协议,用户使用浏览器就可以上传超大文件到服务器(支持上传超过1G的文件)。
    4、 支持断点续传,系统智能续传未上传的文件,续传操作更简单,更方便,更快捷。
    5、 支持文件批量上传, 一次可以上传多个文件. 上传时有详细的状态显示(包括单个文件进度,整体进度,传输速率,剩余时间等)。
    6、 新颖网络免费提供JavaScript SDK包。通过新颖网络提供的封装好的JavaScript类库用户可以快速的与现有系统整合。
    7、 StorageWebPlug提供完善的接口和帮助文档,开发文档。开发人员可以动态设置上传保存路径, 设置允许扩展名, 允许最大大小等,可自定义强。
    8、 支持各种代理(HTTP, Socket4, Socket5等)。
    9、 组件采用多线程机制来保证上传效率。
    10、 支持批量文件上传, 用户可以一次性上传批量文件. 客户端可以绑定HTML表单变量, 服务端并可以接收表单变量
    11、 服务端文件保存路径可以随意指定,服务端文件保存路径可以灵活变化。保存路径支持网络路径。 
    12、 为提高安全性,服务端组件可以指定用户权限 
    13、 可以限制上传单个文件大小, 控制上传带宽上限, 允许文件扩展名, 拒绝文件扩展名等
    14、 上传数据时会根据网络状况来控制数据包大小, 避免网络堵塞
    15、 控件采用ATL编写, cab包只有59KB, 用56k的modem下载不会超过12秒
    16、 服务端支持Windows 2000 Server/Windows 2003 Server/Windows NT/Windows XP/Unix/Linux等操作系统在线演示:http://www.ncmem.com/products/file-uploader/demo/index.html
    官方网站:http://www.ncmem.com
    产品介绍:http://www.ncmem.com/webplug/features/index.aspx
    下载地址:http://www.ncmem.com/download.aspx
    产品截图:
    截图-上传:截图-已上传:
      

  4.   

    Xproer.ImageUploader
    主界面图片列表添加图片编辑图片:提示信息:
      

  5.   

    网上有个仿QQ相册的上传控件。http://www.cnblogs.com/xproer/archive/2010/08/09/1796077.html