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 相关文章推荐
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
JavaScript表单验证实现代码
May 22 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 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
1 Tube Radio
2021/03/02 无线电
新版PHP将向Java靠拢
2006/10/09 PHP
php中截取字符串支持utf-8
2007/01/18 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
php实现文件下载代码分享
2014/08/19 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
Python实现对adb命令封装
2020/03/06 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
护士实习生自我鉴定范文
2013/12/10 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
仓管岗位职责范本
2014/02/08 职场文书
《小池塘》教学反思
2014/02/28 职场文书
工程安全生产协议书
2014/11/21 职场文书
工作简历自我评价
2015/03/11 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python