HTML中简单实现文件的一键上传的操作

时间：2024-02-23 18:40:29

在html中实现文件上传的方式为form表单中使用input type="file"控件,但是这个控件往往显示不是美观,影响页面效果,这时候,一般就通过一键上传的操作,来实现点击一个按钮上传文件.

原理:

设置一个具有file上传文件框的form表单,并且设置style表单为不显示的,同时呢,要对表单中的input控件进行onchange事件监听,当input控件改变的时候,就触发表单提交的操作.设置一个上传文件的按钮,当点击按钮时候,触发表单中的input空间的click事件,来进行文件的浏览.这样一来,当选择好文件后,就自动提交了.

因为表单提交的话,就会自动刷新当前页面,因此采用,在页面中添加一个隐藏的<iframe>控件,并且将file提交的表单form中的target属性指向iframe控件,这样一来,就实现了当前页面无刷新的一键上传的操作.

代码为:(注:jq文件需要自己引入)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>文件一键上传</title>
        <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                //当点击"一键上传"按钮的时候,触发表单中的浏览文件的操作
                $("#hehe").click(function() {
                    $("#uploadfile").click();
                })
                //当选择好上传文件后,执行提交表单的操作
                $("#uploadfile").change(function() {
                    alert("上传文件");
                    $("#form1").submit();
                })
            })
        </script>
    </head>

    <body>
        <input type="button" id="hehe" value="上传文件" />
        <form style="display: none;" id="form1" action="#" method="post" enctype="multipart/form-data" target="myframe">
            <input type="file" name="uploadfile" id="uploadfile" />
        </form>
        <iframe style="display: none;" id="myframe"/>
    </body>

</html>

当点击上传文件按钮的时候,自动弹出选择文件的页面

image

在后台页面进行操作,而不是在当前页面刷新

image

实际开发中,往往采用的是jquery.ocupload的js插件进行一件上传的操作;

官网:http://code.google.com/p/ocupload/

实际操作js代码示例:

$("#button-import").upload({  
    action: \'实际开发中的提交位置\',  
    onSelect: function (self, element) {  
    this.autoSubmit = false;  //关闭自动提交,方便后面进行文件类型判断
    var filename=this.filename();//设定文件名
                var flag1= filename.endsWith(".xls");
                var flag2= filename.endsWith(".xlsx");
                if(flag1||flag2){//判断是否是所需要的文件类型,这里使用的是excel文件
                      this.submit();
                }else{
                      alert("提示请选择正确的文件");
                }
                        
                },  
       onComplete: function (data, self, element) {  
               alert("提示文件上传成功");//当上传成功后,提示
         } 
});

就是这么简单,具体就不演示了

相关文章