2014年2月15日星期六

基于AJAX和jQuery上传文件

以前经常用form的方式上传文件,

 如 html:
<form action="your_url" method="post" enctype="multipart/form-data">
    <input name="file" type="file" />
    <button type="submit" value="Upload" />
</form>

或者,想不用点button直接上传的话可以 html:
<form action="url" method="post" enctype="multipart/form-data">
  <input name="file" type="file" />
</form>

加上jQuery:
$('input:file').change(function() {
  $('form').submit();
});

--------------------------分割线---------------------------

但是用Ajax上传文件实在比用form好太多:发送的数据可以很简洁很flexible,
可以在整个上传的过程返回状态,很多处理都放在client上进行,
也不用重新加载整个页面等等。虽然还有一些古董版的浏览器不支持,但现在应该能给绝大部分人用到了。

这里就给个简单的例子吧,先是html:
<form enctype="multipart/form-data">
    <input name="file" type="file" />
</form>

然后是jQuery:
$('input:file').change(function() {
    var formData = new FormData($('form')[0]);
    $.ajax({
        url: 'your_url',
        type: 'POST',
        data: formData,
    });
});

就OK了。

再来个进阶版的:
$('input:file').change(function() {
    var formData = new FormData($('form')[0]);
    $.ajax({
        url: 'your_url',
        type: 'POST',
        data: formData,
       beforeSend: function({
         alert('start');
       },
       success: function({
         alert('success');
       },
       error: function({
         alert('failed');
       },
        xhr: function() {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){  // For handling the progress of the upload
              myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
            }
            return myXhr;
        },
        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false
    });
});
function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
    }
}

最后,如果想功能更加丰富的话,推荐几个plugin:
1. FineUploader,已经更新到4.3了,慎用4.0以下的版本,有不少bugs;
2. jQuery File Upload, 适合批量上传。

2013年1月18日星期五

LaTex支持中文的问题小结

<一>
一般的模板如果不直接支持中文,可以通过下面两个简单的步骤搞定:

1. 添加\usepackage{CJK}.

2. 在\begin{document}下面添加\begin{CJK*}{UTF8}{bsmi},在\end{document}上面添加\end{CJK*}.

这样运行就OK了。

<二>
一些小tips:

—— \begin{CJK*}{}{}后两个选项可以替换,如Ubuntu下有:
\begin{CJK*}{UTF8}{gkai}         简体 楷体
\begin{CJK*}{UTF8}{gbsn}         简体 宋体
\begin{CJK*}{UTF8}{bkai}         繁体 楷体
\begin{CJK*}{UTF8}{bsmi}        繁体 宋体

而在Windows下有:

\begin{CJK*}{GBK}{kai}         简体 楷体
\begin{CJK*}{GBK}{song}        简体 宋体

等等;

—— 如果不想每次开个tex文件都手动加这几行,可以修改document class文件如下:

1. 在你所用的模板的.cls文件中(如article.cls)找到RequirePackage这一部分,加入\RequirePackage{CJK}.

2. 找到\AtBeginDocument{XXXX},加入一行使之变成\AtBeginDocument{XXXX begin{CJK*}{UTF8}{bsmi}}.

3. 同理,将\AtEndDocument{XXXX}变为\AtEndDocument{XXXX end{CJK*}},这样以后生成文件就自动加入中文了。

<三>
上述方法在某些模板下面还是会发生问题,例如用moderncv,直接运行会提示\section神马吧啦吧啦的错误。这个时候,你需要找到moderncv.cls文件,找到关于section的这一段,看它到底干了什么,具体问题具体分析。

可能的解决途径:

—— 有的时候document class本身是没有close section的,就需要手动在.tex文件的\end{CJK*}之前加入一行\closesection.

—— 对于moderncv.cls,可供参考的解决方法是注释掉\newcommand*{\section}[1]{}里面的两句话:
\phantomsection{}
\addcontentsline{toc}{part}{#1}

类似的问题都可以这样解决。



参考文章:http://blog.csdn.net/donglin425/article/details/7714295

2012年12月23日星期日

解决gvim错误:Gtk-WARNING **: Invalid input string

这个错误是由语言的设置不正确引起的,解决方法很简单:

1. 打开 cd /usr/share/vim/vim72/lang这个存放语言信息的目录。

2. 建立一个链接 sudo ln -s menu_zh_cn.utf-8.vim menu_zh_cn.utf8.vim,OK,问题解决。

解决启动rails server时的错误Could not find a JavaScript runtime.

在Ubuntu下装完rails后便要开始启动它的服务器了,这个时候在终端输入
rails s
会发现报错:
/usr/local/lib/ruby/gems/1.9.1/gems/execjs-1.4.0/lib/execjs/runtimes.rb:51:in `autodetect': Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)

这是因为Ubuntu下没有预设的JavaScript编译器来给Rails用的,需要安装一个套件,方法如下:

1. 打开Gemfile这个文件,加入一行gem 'therubyracer',保存。

2. 敲入命令bundle install来安装。装完之后,用命令bundle show therubyracer可以看到装好的therubyracer这个套件。

3. 重新rails s,可以看到问题解决了。

如果Rails版本比较老(3.1以下)的话,还需要在Gemfile里面加入一行gem 'execjs',同样方法安装才可以搞定。

如果通过sudo gem install therubyracer来安装的话,需要在装之前确认有没有安装libv8.如果没有,还需要sudo gem install libv8安装完之后才可以成功装上therubyracer.

另外,这个错误也可以通过安装Node.js来解决。

参考文章:http://ihower.tw/rails3/firststep.html

2012年12月4日星期二

解决安装Ubuntu Server后启动时黑屏的问题

我装的是Ubuntu 12.10, 显卡是Intel的。 这应该是电脑里显卡和系统不匹配导致的,花了点时间,终于找到一个成功的解决方案:

1.先从CD里启动,跳到安装界面的时候注意下面有提示F6: Other Options, 按F6,选择nomodeset.

2. 再从硬盘里启动,boot的时候在选中Ubuntu时(下面还有recovery mode之类的选项)手快按下e,这就是edit grub了。

3. 在grub中插入一行i915.modeset=1.

4. 按Ctrl+x重新boot.

5. 现在已经可以进入正常的界面登录和操作了,为了让这个设定一直生效呢,需要修改/etc/default/grub.

6. 敲入命令sudo vi /etc/default/grub, 用vi来修改。

7. 查看grub文件,发现有一行GRUB_CMDLINE_LINUX_DEFAULT='''', 插入一段变成GRUB_CMDLINE_LINUX_DEFAULT=''quiet splash i915.modeset=1'',保存退出。应该就可以了。

其他品牌显卡也可以参照此做法,具体可以参考文章:
http://ubuntu-tutorials.com/2010/05/06/ubuntu-10-04-lucid-blank-screen-at-startup-workaround/

2012年10月23日星期二

Android中正确使用自定义style及Theme

【零】
如果你仅仅是对默认的主题进行很少的修改,可以查看Android本身提供的一些主题模式,比如将背景变成透明,可以在AndroidManifest.xml中你想改的activity的tag中加入:
android:theme="@android:style/Theme.Translucent"
然后直接运行就可以了。可以参考官方说明

【一】
如果需要将一个Activity的主题改成自定义形式:

1.先在AndroidManifest.xml中你想改的activity的tag中加入:
android:theme="@style/MyTheme"
如果需要将该主题模式运用于所有Activity,可以在AndroidManifest.xml中写上这样一句:
<activity android:theme="@style/MyTheme">

2.然后在res/values文件夹下创建一个styles.xml的文件,在文件中写入:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme" parent="android:Theme.Light" >
          <!--需要定义的内容-->
    </style>
</resources>

3.需要定义的内容一般以item形式定义,例如:
<item name="android:textColor">#00FF00</item>
这样可以应用自定义的主题模式了。

【二】
需要注意的还有Android版本问题,如果开发的应用面向Android3.0以下的用户,那么最好采取以下步骤:

1.在res文件夹下创建values-v11(面向Android 3.0+)和values-v14(面向Android 4.0+两个文件夹。

2.在这两个文件夹中分别写入
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme" parent="android:Theme.Holo.Light" >
          <!--需要定义的内容-->
    </style>
</resources>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme" parent="android:Theme.DeviceDefault.Light" >
          <!--需要定义的内容-->
    </style>
</resources>
以上Holo是对于Android 3.0+的,DeviceDefault是对于Android 4.0+的。

或者其他你需要引用的parent,比如
    <style name="MyTheme" parent="android:Theme.Holo.Light.NoActionBar" >
          <!--需要定义的内容-->

【三】
最后一个问题是在自定义的主题中定义不同插件的模式,这里以Tab插件为例,我们可以用这样的形式
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme" parent="android:Theme.Holo.Light.NoActionBar" >
          <item name="android:tabWidgetStyle">@style/LightTabWidget</item>
    </style>
    <style name="LightTabWidget" parent="@android:style/Widget.TabWidget">
       <!-- 需要定义的内容 -->
    </style>
</resources>
来单独定义插件的一些属性。

这里可以参考themes_device_defaults.xml的源码。

使用Android新版theme改变插件的主题

写好一个Project之后发现它的Spinner,TimePicker之类的Widgets不知何时都变成了旧版的主题。这个问题看似非常之弱却毫无解决的头绪。于是从头写过,一步一步Run,终于发现问题根源。

原因原来是在res/AndroidManifest.xml中误加入一条:
android:theme="@android:style/Theme.NoTitleBar" 

须知这是一条旧版Android的主题的命令,同一个Activity中的所有插件自然就统统变成了旧版的形式。

要用新版(API Level 13 up)的主题来起到上述命令去掉TitleBar的作用,可以使用如下语句:
android:theme="@android:style/Theme.Holo.Light.NoActionBar"
或者
android:theme="@android:style/Theme.Holo.Light.NoActionBar.Fullscreen"
官方说明见此处

以后要注意碰到类似主题形式变化的问题,检查一下AndroidManifest.xml这个文件哦。