用html5和jquery写的一个文件上传的Demo

最新推荐文章于 2023-01-09 11:20:33 发布
最新推荐文章于 2023-01-09 11:20:33 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： html5 jquery 前端 关于前端的技术探讨 文章标签： html5 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stay_hungry_stay/article/details/81224851
版权

用html5和jquery写的一个文件上传的Demo

jquery-3.3.1.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
    <input id='ipt' style='display: none;' type="file" multiple>
    <button id='btn'>上传</button>
    <script>
        btn.onclick = function(){
            ipt.click();
        }
        ipt.onchange = function(){
            for (var i = 0; i < ipt.files.length; i++) {
                var fr = new FileReader();
                var file = ipt.files[i];
                console.log(file);
                fr.readAsDataURL(file);
                fr.onload = function(){
                    var img = document.createElement('img');
                    img.src=this.result;
                    img.width=300;
                    document.body.appendChild(img);
                    document.body.innerHTML += file.name+' '+ file.lastModifiedDate+' '+ (file.size/1024).toFixed(1)+'kb '+file.type;
                }
            }
        }
        </script>
</body>
</html>

一个小小的案例就完成啦，每天写一点总会成为有进步，至少比昨天更好

Endless-love
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html静态页JQuery ajax示例demo 源码
10-11
JQuery ajax的各种使用方法示例和说明 本示例程序由VS2010建立 c# asp.net ajax demo
jquery Form轻松实现文件上传
12-10
很久开始前就用这个插件了，每次都忘记具体的调用方法，特地写个demo记录下。 先上这个demo的传送门，恩！然后开始了… ①先是html 上传图片 <form action="接口名字" method="post" enctype="multipart/form-...
html+jQuery前端开发代码demo ---并夕夕商城
自救 唯有自强
11-20 1118
文章目录一、结果预览代码：欢迎页面二、代码结构 一、结果预览 代码： https://download.csdn.net/download/GBS20200720/45483826 欢迎页面 二、代码结构 对前端开发的一些理解 安卓开发 vue html 前端开发个人觉得都是这样的框子 ： 页面元素 + 样式 + 向后端发送请求 html开发页面元素 样式 jQuery发送请求，与前端页面元素关联 ...
文档上传的+html5页面,Jquery结合HTML5实现文件上传
weixin_36177719的博客
06-03 333
1.利用Jquery使用HTML5的FormData属性实现对文件的上传在HTML5以前我们如果需要实现文件上传服务器等功能的时候，有时候我们不得不依赖于FLASH去实现，而在HTML5到来之后，我们很容易的实现对文件的上传，只需要利用HTML5的一个FormData属性，结合Jquery就很容易实现文件的上传，而且读取文件的上传进度，下面这个上传案例就是基于上面所说的实现的，下面我将所所有的JS...
html5文档样式,jQuery HTML5文件上传美化插件jQuery.filer
weixin_32969997的博客
06-03 345
插件描述：jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件。它能够完成单文件和多文件的上传，支持文件的拖拽，支持不同的文件格式校验，支持缩略图和图标等，是一款非常实用的文件上传插件jQuery.filerjQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件。它能够完成单文件和多文件的上传，支持文件的拖拽，支持不同的文件格式校验，支持缩略图和图...
HTML5 Ajax文件上传进度条如何显示
12-08
原本打算使用jquery插件进行异步文件上传，比如uploadfy但是需要额外的支持，也有人用iframe模仿异步上传机制，感觉都比较别扭。因为项目不考虑低版本浏览器，所以决定用html5实现。下面只是一个简单的demo，具体...
jQuery+HTML5实现图片上传前预览效果
01-19
这里主要是使用HTML5 的File API,建立一個可存取到该file的url，一个空的img标签，ID为img0,把选择的文件显示在img标签中，实现图片预览功能。请选择支持HTML API的浏览器，比如谷歌Chrome和火狐等。 运行效果如下图...
基于JQuery实现图片上传预览与删除操作
11-25
本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码，经测试目前满足谷歌、火狐、360、IE6,7,8,9,10,11等浏览器，供大家参考，具体内容如下 1. preview.2.0.html <!DOCTYPE html> <html> <...
HTML5_multiple_dnd_upload_demo.zip_JavaScript/JQuery_JavaScript_
08-11
javascript + html5 拖拽式 多文件上传
http文件上传demo（http模拟POST表单上传文件）
09-23
由于iOS无法通过html表单来上传文件，因此想要上传文件，必须实现http请求，而不能像其他语言那样通过html表单的post就能上传。此demo经过xcode5测试通过。此文件上传demo是按照 rfc1867协议实现的。
基于HTML5的jquery文件上传插件（多文件选择、带进度条、完整可用）
02-21
俺亲手写的： 1.支持多文件上传 2.带进度条 3.可以显示文件名称 4.可以实时显示已上传的大小 5.可以从队列中删除 6.各元素的样式都可以自己控制
jquery 本地上传图片预览Demo
08-04
在网上找到一个高手写本地图片上传预览的插件，测试通过ie6，ff2.0、3.6，做成个Demo拿来和大家分享，jsp实现
html 网页demo
09-15
html 网页demo
jQuery HTML5文件上传美化插件jQuery.filer
12-14
插件描述：jQuery.filer是一款简单的HTML5文件上传组件美化jQuery插件。它能够完成单文件和多文件的上传，支持文件的拖拽，支持不同的文件格式校验，支持缩略图和图标等，是一款非常实用的文件上传插件。演示地址：http://www.jq22.com/jquery-info11363
html jquery上传文件,12个最好的 HTML5 jQuery 文件上传脚本
weixin_42352842的博客
06-05 380
1. jQuery File Upload DemoThe basic plus UI version of this script allows features which everyone is looking forward for like multiple file selection, drag & drop support, progress bars, validatio...
JQuery 学习（一）
一蓑烟雨任平生
08-15 154
JQuery 核心 $ 和 $() ​ JQuery的绝大多数方法都是对象方法，但也存在部分的非对象方法，这部分被称之为核心方法。对象方法和核心方法的命名空间不同。具体如下所示 // 这是一个对象方法，它的命名空间为$.fn,它通常跟一个选择器; $('h1').remove(); // 这是一个核心方法，它的命名空间为$。它前面不跟选择器； $.each() ​ 他们之间的区别如下...
jq中的文本读写
个人笔记
04-02 449
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div></div> <h2></h2> <p></p> <input type="text" placeholder="这个属性不
手写jquery（自己封装）
m0_55734030的博客
11-23 910
我们都知道`jQuery`，jQuery是一个快速的，简洁的javaScript库。它的出现让我们不用再在html里面插入一堆js来调用命令了，只需使用选择器查找即可。 这篇文章主要适合新手，尝试自己去封装jQuery，同时加深对jQuery的理解。
用js或jquery生成本地txt文件或者svg文件
weixin_51081257的博客
01-09 1590
导出
layui文件上传demo
最新发布
06-08
以下是一个简单的 layui 文件上传的示例代码： HTML 代码： ```html <div class="layui-upload"> <button type="button" class="layui-btn" id="test-upload-normal">选择文件</button> <div class="layui-upload-list"> <table class="layui-table"> <thead> <tr> <th>文件名</th> <th>大小</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody id="demoList"></tbody> </table> </div> <button type="button" class="layui-btn" id="test-upload-reload">重传</button> <button type="button" class="layui-btn layui-btn-danger" id="test-upload-delete">删除</button> </div> ``` JavaScript 代码： ```javascript layui.use('upload', function(){ var $ = layui.jquery ,upload = layui.upload; //普通图片上传 var uploadInst = upload.render({ elem: '#test-upload-normal' ,url: '/upload/' ,accept: 'file' //允许上传的文件类型 ,done: function(res){ //上传完毕回调 console.log(res); if(res.code == 0){ var demoText = $('#demoText'); demoText.html('<span style="color: #5FB878;">上传成功</span>'); $('#demoList').append('<tr><td>'+ res.filename +'</td><td>'+ (res.size/1024).toFixed(1) +'kb</td><td>上传成功</td><td><button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button></td></tr>'); }else{ var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> ' + res.msg); } } ,error: function(){ //请求异常回调 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> 服务器异常，请稍后重试'); } }); //文件列表操作 var demoListView = $('#demoList') ,uploadListIns = upload.render({ elem: '#test-list' ,url: '/upload/' ,accept: 'file' ,multiple: true ,auto: false ,bindAction: '#testListAction' ,choose: function(obj){ var files = obj.pushFile(); //预读本地文件示例，不支持ie8 obj.preview(function(index, file, result){ console.log(index, file, result); $('#demoList').append('<tr><td>'+ file.name +'</td><td>'+ (file.size/1024).toFixed(1) +'kb</td><td>等待上传</td><td><button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button><button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button></td></tr>') }); } ,done: function(res, index, upload){ if(res.code == 0){ //上传成功 var tr = demoListView.find('tr').eq(index) ,tds = tr.children(); tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>'); tds.eq(3).html('<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'); //清空操作 return delete this.files[index]; //删除文件队列已经上传成功的文件 } this.error(index, upload); } ,error: function(index, upload){ var tr = demoListView.find('tr').eq(index) ,tds = tr.children(); tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>'); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 } }); //删除文件 $('#demoList').on('click', '.demo-delete', function(){ var tr = $(this).parents('tr') ,index = tr.index(); //删除对应的文件 uploadListIns.config.elem.next()[0].value = ''; uploadListIns.config.files.splice(index, 1); tr.remove(); }); //重传文件 $('#demoList').on('click', '.demo-reload', function(){ var tr = $(this).parents('tr') ,index = tr.index(); //删除对应的文件 uploadListIns.config.files.splice(index, 1); tr.remove(); uploadListIns.upload(); }); }); ``` 这个示例代码实现了单文件上传和多文件上传的功能，并且可以实现文件的删除和重传操作。你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值