首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

能浏览本地文件,批量上传图片,像QQ空间那样的控件是什么做的解决思路

2012-03-28 
能浏览本地文件,批量上传图片,像QQ空间那样的控件是什么做的能浏览本地文件,批量上传图片,像QQ空间那样的

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

[解决办法]

HTML code
 
<!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>


[解决办法]
楼主,试试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
产品截图:
截图-上传:

截图-已上传:

热点排行