js读取文件内容

22.0k 前端 , , 3评论
JS是否可以读取本地文件的内容呢?答案是肯定的。 流程只用两步: 用file类型的input载入文件; 用HTML5的FileReader方法读取文件内容。 如下是一个js读取文件内容到文本框的方法。 1 演示 点击查看演示地址。 2 HTML代码 页面有两个元素,file类型的input,和显示内容的textarea文本框。 <input type="file" name="upload" id="uplo…

JQuery实现checkbox状态切换(Toggle)

9.0k 前端 发表评论
点击查看效果演示。 有如下一段HTML代码,是一个checkbox复选框: <div class="line"> <label for="status"> <input type="checkbox" id="status" name="status" value="1" />开启 </label> </div> 我们希望点击div.line的时候,能够自动切换checkbox的状态。 这个实现起来也很简单,JS代码如下: <sc…

Javascript实现页面内容下载

页面上有一段代码,要保存下来,怎么做? 选择复制?用按钮请求数据库?都很低效。 既然页面已经有了内容,为何不用JS获取这段代码,生成文件后直接下载? 下面我们用Blob和URL.createObjectURL来实现这一功能,兼容Chrome、Firefox和IE等主流浏览器。 1 演示 点击查看演示地址。 2 实现代码 JS代码如下,已经封装成一个函数,filename…

plupload多按钮上传

5.1k 前端 , 一条评论
plupload可以轻松实现拖动、点击上传等功能,但是没有明确说明,多按钮上传方式(不要告诉我复制粘贴改browse_button这种方式)。 下面,我们就来探索这样的功能,初始化一段plupload代码,实现多个上传按钮。 1 演示和下载 点击查看演示Demo。 点击这里下载完整代码。 2 HTML代码 HTML代码如下: <div> <div class="upload-bo…

JQuery定时自动消失提示框/弹出框

17.0k 前端 , 3评论
在表单提交中,不论成功与否,好的体验都应该有弹出提示,效果: 在页面中央显示提示,1.5秒后消失,不影响页面的正常布局。 1 HTML代码 HTML代码显示提示内容,放在页面中任何位置。 <div class="alert"></div> 2 CSS代码 弹出框参考了 Bootstrap 的样式: .alert { display: none; position: fixed; top: 50%; left: 50%;…

JQuery Post转义提交HTML模板

3.5k 前端 , , 发表评论
最近遇到这样一个问题,在表单中有一个textarea文本框,用来保存HTML模板。 因为是HTML模板,所以会有<html>、<script>等标签,但是这样无法通过AJAX Post方式保存。 经过实验,<script是导致无法提交的根源。找到原因,解决办法就简单了,就是把<转义成HTML实体&lt;。 最新说明:这个最后发现,是__POST被后台的…

JS实现表格列宽拖动

3.9k 前端 , 4评论
在数据表格中,有时候需要拖动表格宽度,查看完整的数据,是很常用的功能。 1 效果 可以用纯JS就可以实现,如下,是正常情况下的表格: 拖动表格标题中间线,拖动后效果如下: 查看DEMO 2 代码 HTML代码: <!DOCTYPE html> <html> <head> <title>演示</title> <script type="text/javascript" src="ta…

JQuery和Awesome实现炫酷【返回顶部】按钮

之前通过JQuery+纯CSS实现了返回顶部的功能,比较轻量级:JQuery+CSS实现【返回顶部】按钮,不需要图片。 现在我们再用JQuery+Awesome实现更炫酷的“返回顶部”按钮。 效果如下:      按钮的工作流程大致是:页面加载后按钮隐藏,向下拖动显现,鼠标悬浮时变色(颜色可以更改),点击返回顶部。 代码如下,复制成HTML文件保存即可看到效…

PHP读取文件内容并排序输出

3.0k 前端 , 发表评论
本文实现PHP读取一个txt文件内容,并把内容按自然排序后输出。 假设 a.txt 文件内容如下: h a 6 z i 0 3 PHP读取这个文件,排序后输出,代码如下: $txt = file_get_contents("a.txt"); $arr = explode(PHP_EOL, $txt); sort($arr); echo implode(PHP_EOL, $arr); 执行后的结果如下: 0 3 6 a h i z

自定义JavaScript的alert()弹出框样式

JavaScript原始的 alert()弹出框效果很差。 于是想着自定义这个原始alert()的显示样式。 JQuery方式实现代码如下: <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> (function () { window.alert = function (text) { //解析…
« 上一页   下一页 »