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>

时间: 2024-10-03 14:01:53

js编写的浏览上传文件的相关文章

使用js清空input file上传文件的内容

html页面代码如下: <input id="file_input" type="file" onchange="upLoadFile(this)" value="" />js的代码如下,可以直接将上传文件input按钮的内容直接清空: var obj=document.getElementById('file_input');obj.outerHTML=obj.outerHTML; ---------------

不带插件 ,自己写js,实现批量上传文件及进度显示

今天接受项目中要完成文件批量上传文件而且还要显示上传进度,一开始觉得这个应该不是很麻烦,当我在做的时候遇到了很多问题,很头疼啊. 不过看了别人写的代码,自己也测试过,发现网上好多都存在一些问题,并不是自己想要的.然后自己查阅各种资料,经过自己总结,最终完成了这个功能. 如果大家有什么问题可以提出来,一起交流,学习.有什么不对的地方也指出来,我也虚心学习.自己也是刚写博客,您们的赞是我写博客的动力,谢谢大家. 条件:我采用struts2,java ,ajax,FormData实现; 1.实现的逻辑

使用jquery.form.js提交表单上传文件

方法: 1.formSerilize()  用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式. 2.clearForm()   清除表单中所有输入值的内容. 3.restForm    重置表单中所有的字段内容.即将所有表单中的字段恢复到页面加载时的默认值. 疑问:ajaxForm()与ajaxSubmit()的区别: 答案:$("#form1").ajaxForm();  相当于以下两行: 1 2 3 4 $("#form1".subm

用js如何获取一个上传文件的扩展名

function suffix(file_name){     var result =/\.[^\.]+/.exec(file_name);     return result; }

JS异步上传文件

直接调用Upload(option)方法,即可上传文件,不需要额外的插件辅助,采用原生js编写. /* *异步上传文件 *option参数 **url:上传路径 **data:上传的其他数据{id:"1"} **maxSize:文件最大值(单位M) * img:"#qrimg", **callback:回调函数(可空) **beforeSend:上传前函数(可空) */ function Upload(option) { var fd = new FormData(

ftp局域网内实现上传文件资源共享

** 第一步:搭建ftp服务器 ** 1.安装ftp服务 2.添加站点 3.配置站点的用户名和密码 第二步:创建springboot项目整合ftp 1.添加ftpclient的依赖 <dependency> <groupId>commons-net</groupId> <artifactId>commons-net</artifactId> <version>3.1</version> </dependency>

文件上传控件-如何上传文件-文件夹断点续传

最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据.上传影音文件等.如果文件体积比较大,或者网络条件不好时,上传的时间会比较长(要传输更多的报文,丢包重传的概率也更大),用户不能刷新页面,只能耐心等待请求完成. 下面从文件上传方式入手,整理大文件上传的思路,并给出了相关实例代码,由于PHP内置了比较方便的文件拆分和拼接方法,因此服务端代码使用

网页上传文件夹的解决方案

最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据.上传影音文件等.如果文件体积比较大,或者网络条件不好时,上传的时间会比较长(要传输更多的报文,丢包重传的概率也更大),用户不能刷新页面,只能耐心等待请求完成. 下面从文件上传方式入手,整理大文件上传的思路,并给出了相关实例代码,由于PHP内置了比较方便的文件拆分和拼接方法,因此服务端代码使用

web前端上传文件按钮自定义样式

思路: 按钮进行隐藏,样式自己该怎么写怎么写,之后通过js监测input改变上传文件. 前端写法: // jquery + bootstrap写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传文件获取URL</title> <link rel="stylesheet" h