关于自定义一个上传的file按钮

在input中html给我们一个 type  file用来做文件上传的功能,比如

但是这样的样式,实在难看,在开发的时候看了layui和bootstrap的点击上传,都很不错。

前者的调用方式和js的差别太大,后者需要引入bootstrap fileinput.js 我都不是很满意,

后来写了一个原生的js来调用,话说我还是引用了layui的css样式,因为确实不错

看下代码

1     <input type="file" onchange="upload()" style="display:none" id="file-input" />
2     <button onclick=‘selectFile()‘>上传</button>

这是没有引入layui的类之前的html,他的input type file是默认隐藏的,我们可以在

按钮上模拟input的点击事件

var inputBox = document.getElementById("file-input");

        function selectFile(){
            inputBox.click()
        }        

点击之后,input就相当于被点击,开始上传文件,当上传文件的时候,input上绑定的onchange();就开始生效了

这是一个加载的函数

function upload(){
        //alert(123);
            var file = inputBox.files[0]
            if(! file){
                alert(‘请选择文件‘)
                return
            }
            var form = new FormData()
            form.append(‘file‘,file)
            var xhr = new XMLHttpRequest();
            xhr.open("post", ‘../../api/receiveOptionQuestion‘, true);
            xhr.onload = function () {
                alert(xhr.responseText);
            };
            xhr.upload.addEventListener("progress", function(e){
                console.log(e.loaded / e.total * 100)
            }, false);
            xhr.send(form);
        }

在open方法中定义上传的接口,返回数据为responseText

加载数据的时候,绑定一个进度的事件,可以由e.loaded/e.total*100+"%"得到当前的进度(百分数)

最后传值

原文地址:https://www.cnblogs.com/czy960731/p/8387678.html

时间: 2024-10-29 17:49:54

关于自定义一个上传的file按钮的相关文章

CSS自定义文件上传按钮

原文:CSS自定义文件上传按钮 今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: 两边的按钮都有了样式,但中间的选择文件的样式死活调不出来,于是我就同他一块解决,后来经过自己设置width,height折腾无果,再求助google终于找到了解决办法,这个方法是这样的: 用一个标签套着文件域,然后调整文件域外边的元素,设置成按钮样式,然后,在把文件域"隐藏"掉(这里的隐藏

基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用.关于Uploadify的控件介绍,可以参考我之前的随笔介绍<基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用>. 1.文件上传插件File In

只用css来美化的上传表单按钮(抄的迅雷的)

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>文件上传</title><link href="css/reset.css" rel="stylesheet" type="text/css"><style type="text/css">.wei

Bootstrap文件上传插件File Input的使用

1.文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http://plugins.krajee.com/file-basic-usage-demo. 这是一个增强的 HTML5 文件输入控件,是一个 Bootstrap 3.x 的扩展,实现文件上传预览,多文件上传等功能. 一般情况下,我们需要引入下面两个文件,插件才能正常使用: bootstrap-fileinput/css

vue项目富文本编辑器vue-quill-editor之自定义图片上传

使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改配置. 创建一个quill-config.js的文件,里面写自定义图片上传.代码如下 /*富文本编辑图片上传配置*/ const uploadConfig = { action: '', // 必填参数 图片上传地址 methods: 'POST', // 必填参数 图片上传方式 token: ''

ueditor 百度编辑器 自定义图片上传路径和格式化上传文件名

今天项目中需要自定义图片上传的保存路径,并且不需要按照日期自动创建存储文件夹和文件名,我的ueditor版本是1.3.6.下面记录一下我配置成功的方法,如果有什么不对的地方欢迎指出,共同学习: 1:我在本地项目的根目录下新建一个文件夹,比如:upload. 2:打开ueditor/php/config.php,改成如下代码后保存: <?php return array( //图片上传允许的存储目录 /*'imageSavePath' => array ( 'upload1', 'upload2

html+css实现自定义图片上传按钮 &#207061;

原文: http://blog.gqylpy.com/gqy/492 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

刚完成的一个上传头像模块,望指点(含详细代码)

file API,直接读取本地文件.fileAPI和JCrop的结合使用上传头像. 1.html部分 <input id="demo" type="file" name="file" onchange="showPic();"/> <img id="avatar" src="" style="width:200px"> 2.fileAPI预览图

Jquery自定义图片上传插件

1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2.该图片上传插件实现功能如下: 1>能够异步上传,上传成功之后,服务器返回响应结果:能够定义上传前和上传后自定义处理方式: 2>能够实现文件格式判断,过滤非图片文件: 3>服务端能够过滤重复上传的图片: 3.页面代码分析: 1>.Jquery图片上传插件代码如下: // 选中文件, 提