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

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

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