首页 > 编程 > JavaScript > 正文

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

2019-11-19 15:42:03
字体:
来源:转载
供稿:网友

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

<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实现浏览上传文件的代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表