add ie6/7 image preview feature

Author: 2betop

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /doc
 server/*
+!server/preview.php
 !server/fileupload.php
 !server/fileupload2.php
 !server/crossdomain.xml

examples/upload.js

@@ -150,7 +150,7 @@
                 i = 0,
                 // 修改js类型
                 unAllowed = 'text/plain;application/javascript ';
-            
+
             for ( ; i < len; i++ ) {
                 // 如果在列表里面
                 if ( ~unAllowed.indexOf( items[ i ].type ) ) {
@@ -222,16 +222,30 @@
                 // @todo lazyload
                 $wrap.text( '预览中' );
                 uploader.makeThumb( file, function( error, src ) {
+                    var img;
+
                     if ( error ) {
                         $wrap.text( '不能预览' );
                         return;
                     }
-                    if( !isSupportBase64 ) {
-                        // 针对不支持base64的浏览器单独处理
-                        // src = 'http://f9.topit.me/9/dd/6d/11206448174286ddd9l.jpg';
+
+                    if( isSupportBase64 ) {
+                        img = $('<img src="'+src+'">');
+                        $wrap.empty().append( img );
+                    } else {
+                        $.ajax('../server/preview.php', {
+                            method: 'POST',
+                            data: src,
+                            dataType:'json'
+                        }).done(function( response ) {
+                            if (response.result) {
+                                img = $('<img src="'+response.result+'">');
+                                $wrap.empty().append( img );
+                            } else {
+                                $wrap.text("预览出错");
+                            }
+                        });
                     }
-                    var img = $('<img src="'+src+'">');
-                    $wrap.empty().append( img );
                 }, thumbnailWidth, thumbnailHeight );
 
                 percentages[ file.id ] = [ file.size, 0 ];

server/fileupload.php

@@ -9,6 +9,10 @@
  * Contributing: http://www.plupload.com/contributing
  */
 
+#!! 注意
+#!! 此文件只是个示例，不要用于真正的产品之中。
+#!! 不保证代码安全性。
+
 #!! IMPORTANT:
 #!! this file is just an example, it doesn't incorporate any security checks and
 #!! is not recommended to be used in production environment as it is. Be sure to
@@ -47,7 +51,7 @@
 @set_time_limit(5 * 60);
 
 // Uncomment this one to fake upload time
-usleep(5000);
+// usleep(5000);
 
 // Settings
 // $targetDir = ini_get("upload_tmp_dir") . DIRECTORY_SEPARATOR . "plupload";
@@ -77,13 +81,6 @@
     $fileName = uniqid("file_");
 }
 
-$md5File = @file('md5list.txt', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
-$md5File = $md5File ? $md5File : array();
-
-if (isset($_REQUEST["md5"]) && array_search($_REQUEST["md5"], $md5File ) !== FALSE ) {
-    die('{"jsonrpc" : "2.0", "result" : null, "id" : "id", "exist": 1}');
-}
-
 $filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName;
 $uploadPath = $uploadDir . DIRECTORY_SEPARATOR . $fileName;
 

server/preview.php

@@ -0,0 +1,63 @@
+<?php
+/**
+ * 此页面用来协助 IE6/7 预览图片，因为 IE 6/7 不支持 base64
+ */
+
+$DIR = 'preview';
+// Create target dir
+if (!file_exists($DIR)) {
+    @mkdir($DIR);
+}
+
+$cleanupTargetDir = true; // Remove old files
+$maxFileAge = 5 * 3600; // Temp file age in seconds
+
+if ($cleanupTargetDir) {
+    if (!is_dir($DIR) || !$dir = opendir($DIR)) {
+        die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}');
+    }
+
+    while (($file = readdir($dir)) !== false) {
+        $tmpfilePath = $DIR . DIRECTORY_SEPARATOR . $file;
+
+        // Remove temp file if it is older than the max age and is not the current file
+        if (@filemtime($tmpfilePath) < time() - $maxFileAge) {
+            @unlink($tmpfilePath);
+        }
+    }
+    closedir($dir);
+}
+
+$src = file_get_contents('php://input');
+
+if (preg_match("#^data:image/(\w+);base64,(.*)$#", $src, $matches)) {
+
+    $previewUrl = sprintf(
+        "%s://%s%s",
+        isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off' ? 'https' : 'http',
+        $_SERVER['HTTP_HOST'],
+        $_SERVER['REQUEST_URI']
+    );
+    $previewUrl = str_replace("preview.php", "", $previewUrl);
+
+
+    $base64 = $matches[2];
+    $type = $matches[1];
+    if ($type === 'jpeg') {
+        $type = 'jpg';
+    }
+
+    $filename = md5($base64).".$type";
+    $filePath = $DIR.DIRECTORY_SEPARATOR.$filename;
+
+    if (file_exists($filePath)) {
+        die('{"jsonrpc" : "2.0", "result" : "'.$previewUrl.'preview/'.$filename.'", "id" : "id"}');
+    } else {
+        $data = base64_decode($base64);
+        file_put_contents($filePath, $data);
+        die('{"jsonrpc" : "2.0", "result" : "'.$previewUrl.'preview/'.$filename.'", "id" : "id"}');
+    }
+
+} else {
+    die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "un recoginized source"}}');
+}

src/widgets/image.js

@@ -78,6 +78,8 @@ define([
 
             // 为空的话则保留原有图片格式。
             // 否则强制转换成指定的类型。
+            // IE 8下面 base64 大小不能超过 32K 否则预览失败，而非 jpeg 编码的图片很可
+            // 能会超过 32k, 所以这里设置成预览的时候都是 image/jpeg
             type: 'image/jpeg'
         },