很多时候我们会用到上传,实现一个普通的上传也很简单,不用引用繁琐的插件

一个普通的上传

    <form action="=upload" method="post" enctype="multipart/form-data">
<input id="file1" name="fileupload" type="file" value="" />
<input id="" type="submit" value="上传" />
</form>

From上的属性

action是要上传的地址,要向什么地方发送表单数据,可以是绝对地址,也可以是相对地址。

method是要发送的方式,可以是post,也可以是get。

enctype规定了在发送之前对要发送的数据如何编码,multipart/form-data表示不需要对字符编码,如果是上传,必须用这个属性。

Input上的属性

accept此处没有定义,可以过滤文件上传的类型,如accept="image/gif, image/jpeg",多个用逗号隔开。

multiple如果加入了这个属性,表示可以支持多选,如multiple="multiple"。

---------------------------------------------------以上实现简单的上传就够了---------------------------------------------------------------------

上传后input会有一些属性,可以给我们提供一些便利。

    <form action="=upload" method="post" enctype="multipart/form-data">
<input id="files1" name="fileupload" type="file" value="" onchange="fileChange()" />
<input id="" type="submit" value="上传" />
</form>
var files1 = document.getElementById('files1');
function fileChange(){
console.log(files1.files)
}

这里给input添加了一个事件,改变后获取input上的files属性。上传了一个文件后打印结果如下

可以看到,其中files里有一个对象,包含了上传文件的名字、大小以及格式,我们就可以根据这些属性来做一些事情。

如想要获取图片上传的名字,可用files1.files[0].name,大小可以用files[1].files[0].size等。

如果想让上传的图片显示出来,这里提供两种方法:

方法一:直接把名字给一个img的src(图片需要放在同文件夹内)。

<img src="" alt="" id="uploadImg">
<script>
var files1 = document.getElementById('files1');
var uploadImg = document.getElementById('uploadImg');
function fileChange(){
uploadImg.src = files1.files[0].name;
}
</script>

方法二:创建一个FileReader对象

<img src="" alt="" id="uploadImg">
<script>
var files1 = document.getElementById('files1');
var uploadImg = document.getElementById('uploadImg');
function fileChange(){
var reader = new FileReader();
reader.readAsDataURL(files1.files[0]);
reader.onload = function () {
uploadImg.src = this.result;
}
}
</script>

如果要实现多文件上传,同理用循环咯,既然有files[0],就有files[1],files[2].....,至于用哪种方法实现都可以。

方法一的例子:

<form action="Upload" method="post" enctype="application/x-www-form-urlencoded" >
<input onchange="cinput()" id="File1" name="fileupload" accept="image/gif, image/jpeg" multiple="multiple" type="file" value="" />
</form>
<div id="imgList"></div>
<script>var File1 = document.getElementById('File1');
var imgList = document.getElementById('imgList');
function cinput() {
var imgHtml = '';
for(var i=0; i< File1.files.length; i++){
var imgHtmlTem = `<img id="img_preview" data-src="" src=${File1.files[i].name} data-holder-rendered="true" style="width: 100px; height:100px;display: block;">`;
imgHtml+=imgHtmlTem;
}
imgList.innerHTML = imgHtml;
}
</script>

end.

input实现上传的更多相关文章

  1. ajax+ashx 完美实现input file上传文件

    1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效 ...

  2. 如何用一张图片代替 'input:file' 上传本地文件??

    今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的:  如何用一张图片代替 'input:file' 上传 ...

  3. 自定义input文件上传样式

    前言 文件上传是我们经常会用到的功能,但是原生的input样式太丑了,能不能自定义一个input文件上传样式呢?我这里写了两种方法,form表单提交跟ajax异步提交都没有问题,自动上传或者点击上传按 ...

  4. HTML5: input:file上传类型控制

    ylbtech-HTML5: input:file上传类型控制   1. 一.input:file 属性返回顶部 一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的 ...

  5. HTML5的 input:file上传类型控制(转载)

    http://www.haorooms.com/post/input_file_leixing HTML5的 input:file上传类型控制 2014年8月29日 66352次浏览 一.input: ...

  6. HTML5的 input:file上传类型控制

    一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文 ...

  7. input按钮上传按钮样式

    主要是定位和不透明度来实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. input file上传文件扩展名限制

    方法一(不推荐使用):用jS获获取扩展名进行验证: <script type="text/javascript" charset="utf-8"> ...

  9. 使用input=file上传

    前台,form的target指向iframe <form action="/EmailHandler.ashx?action=upload" id="form1&q ...

  10. ASP.NET MVC使用input标签上传文件

    有些时间学习了,温习一下ASP.NET MVC了.上传文档是在开发过程中,必须撑握的一个功能.以前上传均是使用第三方控件uploadify来实现,今天使使用VS标准标签input 的type=&quo ...

随机推荐

  1. RxPermissions Usage

    refs:https://github.com/tbruyelle/RxPermissions https://www.jianshu.com/p/c3546e5cd2ffhttps://www.ji ...

  2. creating server tcp listening socket 127.0.0.1:6379: bind No error

    参考链接:https://blog.csdn.net/n_fly/article/details/52692480 1.window10环境下面安装的redis,之前安装好弄了一下,过了好几天,再次使 ...

  3. 装饰器模式&&ES7 Decorator 装饰器

    装饰器模式(Decorator Pattern)允许向一个现有的对象动态添加新的功能,同时又不改变其结构.相比JavaScript中通过鸡肋的继承来给对象增加功能来说,装饰器模式相比生成子类更为灵活. ...

  4. 利用Graphviz绘制逻辑关系依赖图

    说明:在很多情况下,需要将复杂且有些规律的代码整理成逻辑片段,这个时候就需要画图,很多时候图比代码更加直观 Graphviz是一个比较好的绘图工具,可以通过简单的代码绘制出复杂的逻辑图,且其代码就像平 ...

  5. 【Go】那么多数值类型,应该选哪个?

    原文链接:https://blog.thinkeridea.com/201903/go/selection_of_numerical_types.html Go 内置很多种数值类型,往往初学者不知道编 ...

  6. (二)文档请求不同源之window.name跨域

    一.基本原理 window.name不是一个普通的全局变量,而是当前窗口的名字.这里要注意的是每个iframe都有包裹它的window,而这个window 是top window的子窗口,而它自然也有 ...

  7. LOJ.2865.[IOI2018]狼人(Kruskal重构树 主席树)

    LOJ 洛谷 这题不就是Peaks(加强版)或者归程么..这算是\(IOI2018\)撞上\(NOI2018\)的题了? \(Kruskal\)重构树(具体是所有点按从小到大/从大到小的顺序,依次加入 ...

  8. 使用CSS达到文字首尾对齐效果

    在制作表单的时候经常会遇到需要不同个数的文字首尾对齐,比如: <span>姓名:</span> <span>联系方式:</span> 姓名: 联系方式: ...

  9. Navicat premium 破解步骤

    测试环境:MacOS High Sierra 10.13.3Windows版破解教程请看 https://www.52pojie.cn/thread-688820-1-1.html 破解思路依然是替换 ...

  10. GMA Round 1

    学弟说我好久没更blog了. 因为自己最近其实没干什么. 所以来搬运一下GMA Round 1 的比赛内容吧,blog访问量.网站流量一举两得. 链接:https://enceladus.cf/con ...