JS实现浏览上传文件的代码


Posted in Javascript onAugust 23, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<div style="position:relative;width:380px;">
      <iframe id="t_load" name="t_load" style="display: none"></iframe>
      <form action="" method="post" enctype="multipart/form-data" name="form1" target="t_load">
        <input type='text' name='textfield' id='textfield' style="height:22px; border:2px solid #cdcdcd; width:230px; border-radius:50px;" />
        <input type='button' value='浏览...' style="display: inline-block;
 margin-bottom: 0;
 font-size: 14px;
 border-radius: 4px;
padding: 6px 12px;
 margin: 2px 2px;
 border: 1px solid #357ebd;
 background: #1b9ad5;
 color: #fff;" />
        <input type="file" name="file1" accept="image/jpeg, image/gif" id="file1" onchange="document.getElementById('textfield').value=this.value" style="position:absolute; top:5px; right:74px; height:27px; filter:alpha(opacity:0);opacity: 0;width:300px" />
        <input type="button" name="button" onclick="mysubmit()" value="上传" style="display: inline-block;
 margin-bottom: 0;
 font-size: 14px;
 border-radius: 4px;
padding: 6px 12px;
 margin: 2px 2px;
 border: 1px solid #357ebd;
 background: #1b9ad5;
 color: #fff;">
      </form>
    </div>
    <div style="display:none;color:#6D6D72;font-size: 20px;" id="res"></div>
    <script>
      function mysubmit() {
        var a = document.getElementById("textfield").value;
        if(a == "") {
          alert("请上传文件");
          return;
        }
        document.form1.submit();
        ajaxsend();
      }
      function ajaxsend() {
        var xmlHttp;
        if(window.ActiveXObject) {
          xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } else {
          xmlHttp = new XMLHttpRequest();
        }
        xmlHttp.open("post", "upload", true);
        xmlHttp.onreadystatechange = function() {
          xmlHttp.readyState;
          if(xmlHttp.readyState == 4) {
            res.innerHTML = "上传成功!";
            setTimeout(function() {
              res.innerHTML = "";
            }, 2000);
          } else {
            document.getElementById("res").style.display = "inline";
          }
        }
        xmlHttp.send();
        var obj = document.getElementById('textfield');
        obj.outerHTML = obj.outerHTML;
      }
    </script>

总结

以上所述是小编给大家介绍的JS实现浏览上传文件的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
早该知道的7个JavaScript技巧
Mar 27 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
vue实现表单录入小案例
Sep 27 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 #jQuery
JS轮播图实现简单代码
Feb 19 #Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 #Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 #Javascript
最基础的vue.js双向绑定操作
Aug 23 #Javascript
vue组件实现文字居中对齐的方法
Aug 23 #Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 #Javascript
You might like
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
JS中表单的使用小结
2014/01/11 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
python3音乐播放器简单实现代码
2020/04/20 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
经济管理专业自荐信
2013/12/30 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
学生检讨书如何写
2014/10/30 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
导游词之崇武古城
2019/10/07 职场文书
详解Python牛顿插值法
2021/05/11 Python