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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
学习YUI.Ext 第七天--关于View&amp;JSONView
Mar 10 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
JavaScript实现班级抽签小程序
May 19 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
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
php实现的双色球算法示例
2017/06/20 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
Python3解释器知识点总结
2019/02/19 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
德国旅游网站:weg.de
2018/06/03 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
给分销商的致歉信
2014/01/14 职场文书
总经理岗位职责范本
2014/02/02 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
作文批改评语大全
2014/04/23 职场文书
广播体操比赛主持词
2015/06/29 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server