HTML/CSS

三星手机使用type="file"上传文件的问题

使用HTML5进行手机应用开发时,遇到上传文件使用:
 <input type="file" name="file" />

这个file类型在IOS以及Android一般手机里都没有问题,唯独在三星的系列手机内有问题。问题描述如下:
点击上传按钮->选择图片,结果整个表单页面重新刷新,导致表单内的所有填写的内容丢失,包括选择文件项本身。

 

一开始以为是三星不支持type="file",但是后来觉得没道理。连难搞定的IOS都能支持了,并且本身Android是支持的,三星不至于不支持。

后来才发现需要在标签内加入 accpet="image/*" 属性。

博客分类: 

Chrome Notifications

web QQ,比价插件等都可以在浏览器里弹出一个消息框。其实实现起来还挺简单,主要用到window.webkitNotifications

进入主题,

第一步需要检查浏览器是否开启了显示消息的权限。

// check permission

window.webkitNotifications.checkPermission();

如果没有权限,请求权限:

// request permission if 

window.webkitNotifications.requestPermission(function(){

  /*if (callback) {  

    callback(this.checkPermission());  

  }*/

});  

接着就能创建消息啦,通过show方法显示:

// create notification.

博客分类: 

排版引擎和JS引擎

排版引擎(Layout Engine)

主要是是用来让网页里浏览器绘制网页。目前流行的排版引擎如下:

WebKit 

  - Apple Safari

  - Google Chrome

Trident

  - Internet Explorer

Gecko

  - Firefox

 

JS引擎(JS Engine)

顾名思义,JS engine是专门用来处理JS脚本的程序。

主流的浏览器的JS engine如下:

Mozilla

  SpiderMonkey - Firefox 1.0~3.0

  Rhino - 由Mozilla基金会管理,open source,完全以java编写的。

  TraceMonkey Firefox 3.5~3.6

  JaegerMonkey  Firefox 4.0 + 

  IonMonkey Firefox 18.0+

Google

页面中实现无刷新上传文件

在web中实现无刷新上传文件有几种方式:

 

1. 使用HTML5中的FormData和fileReader实现。但是这种方式受限于浏览器。如:IE只适用于IE10。

可参考:http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

2. 使用隐藏的iframe提交。

可参考:http://confi.blog.51cto.com/5271328/1174071

 

最近,在Drupal 7里发现内容类型(content type)为image的字段都可以实现无刷新上传。所以很想知道它是怎么实现的。经过研究发现,其实Drupal7内引入了一个js lib——jquery.form.js。

使用挺简单的:

index.html 

博客分类: 

一个不错的图片轮放flash——bcastr3.0 通用图片轮换播放器

今天在网上找到一个用于图片轮放的flash,可以动态的加载图片。

bcastr3.0 通用图片轮换播放器

可以用于各种新闻系统或者blog系统

  • 可以读取xml设置播放列表,自定义xml地址
  • 可以将图片地址直接写网页中直接,不需要xml
  • 自动适应图片大小
  • 循环播放,自定义自动播放时间
  • 不限制图片数量
  • 自定义尺寸,自动适应任何比例,图片不变形
  • 自定义图片题目(可选)
  • 浏览过程中下载
  • 自定义图片连接(可选)
  • 自定界面色彩放案

3.0新增特点:

博客分类: 

页面