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 相关文章推荐
密码强度检测效果实现原理与代码
Jan 04 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
javascript倒计时效果实现
Nov 12 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
JS实现按比例缩小图片宽高
Aug 24 Javascript
微信小程序实现简单购物车功能
Dec 30 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
重置版游戏视频
2020/04/09 魔兽争霸
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
php实现webservice实例
2014/11/06 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
js 中 document.createEvent的用法
2010/08/29 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
python计算圆周率pi的方法
2015/07/11 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
python之django母板页面的使用
2018/07/03 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
Jupyter加载文件的实现方法
2020/04/14 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
迷你西餐厅创业计划书范文
2013/12/31 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
《将心比心》教学反思
2014/04/08 职场文书
公证书格式
2015/01/23 职场文书
学雷锋感言
2015/08/03 职场文书
高中政治教学反思
2016/02/23 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL
Python实现数据的序列化操作详解
2022/07/07 Python