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

一个普通的上传

    <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. Hdu 1022 Train Problem I 栈

    Train Problem I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  2. ionic 3 热更新 Hot Code Push

    最近用ionic 3 做的app业务做的差不多了,突然想到以后app如果有更新该怎么搞?想到我们的app后期更新应该不大,,最多就是改改bug和增加下用户体验,如果只有一些小的更新,然后提交各个应用商 ...

  3. ISP PIPLINE (附加1) Green Imbalance

    1.什么是Green imbalance 芯片的Gr和Gb通道获取的能量或者是输出的数据不一致,造成这种情况的原因一方面是Gr,Gb通道的半导体制造工艺方面的差异,另一方面是microlens的存在, ...

  4. LOJ.6504.[雅礼集训2018 Day5]Convex(回滚莫队)

    LOJ 莫队.发现只需要维护前驱后继就可以了. 但是加入一个点需要找到它当前的前驱后继,很麻烦还带个\(\log\). 但是如果只有删除某个点,只需要更新一下它的前驱后继即可. 用回滚莫队就好惹. 撤 ...

  5. svn没有权限报出的错

  6. CSS,浮动及其影响

    浮动(float): 让默认文档流(标准文档流)下的元素漂浮起来,水平排列. 通俗点来说,浮动可以让元素浮到第二层,而其他没有浮动的元素就往上排,而我们是俯视去看的,所以往上顶的那个元素就会被遮住,这 ...

  7. HBase RegionServer Pause for hours 卡顿几小时 故障

    关键词:hbase jvm gc regionserver wal pause 背景: HBase 1.1.2 客户的hbase集群最近出现RegionServer宕机情况.跟踪了master和RS日 ...

  8. __x__(41)0909第五天__长表格

    长表格 银行流水,表格很长... 则需要将表格分为 表头 thead ,主体数据 tbody , 表格底部 tfoot 三个标签无顺序要求,易于维护:thead → tfoot → tbody 如果没 ...

  9. (52)Wangdao.com第七天_字面量/变量_标识符_数据类型_数据的存储

    JavaScript 字面量 和 变量 字面量:就是那些不可变的值,如1,2,100,2000,Infinity,NaN 变量: 变量,代表的当前随机分配的内存地址. 变量的值,是可变的,可以用来保存 ...

  10. [LeetCode] Split BST 分割二叉搜索树

    Given a Binary Search Tree (BST) with root node root, and a target value V, split the tree into two ...