如何上传使用 javascript 和 PHP 转换缩略图的图像文件？答案

【问题标题】：How to upload image file that converted thumbnails with javascript & PHP?如何上传使用 javascript 和 PHP 转换缩略图的图像文件？
【发布时间】：2012-07-10 20:46:04
【问题描述】：

我有一些代码，在上传原始图像之前，它会创建缩略图图像。我想做的是，我不想上传客户的原始图片，而是上传缩略图。原因是原始图像文件通常太大，而我的系统可以处理非常小的图像，例如缩略图。我怎样才能实现我的目标？

到目前为止，这是我的代码：

PHP 代码：

if (isset($HTTP_POST_VARS['action'])) {
   $SafeFile = $_FILES['client_image']['name'];
}

HTML 代码：

< input type="file"  valign=middle  name="client_image" id="client_image" >
< output id="list" > <  /output>

JavaScript 代码：

document.getElementById('client_image').addEventListener('change', handleFileSelect, false);
function handleFileSelect(evt) {
    var files = evt.target.files; 
    for (var i = 0, f; f = files[i]; i++) {
        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }
        reader.onload = (function(theFile) {
            return function(e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb" id="thumb_image" src="', e.target.result,
                                '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };  
        })(f);
    }
}

【问题讨论】：

除非您的目标是支持<canvas> 的现代浏览器，否则您无法在 JS 中执行任何操作来缩小客户端上的 gif/jpg。根本没有实用的方法可以以任何实用的方式对图像进行像素级操作。
你可以，但是在 Flash/Java 中这样做，但当然你的代码不能保证运行，所以你需要优雅地处理失败
我所有的客户都应该使用 Chrome，但在寻找 HTML 5 的解决方案之前。使用上面的代码，我能够创建小尺寸的缩略图。我想做的就是上传这张图片。有没有办法上传这个缩略图？

标签： php javascript

【解决方案1】：

唯一适用于所有流行浏览器的解决方案是使用带有图像预处理功能的 Flash 上传器。

SWFUploader（版本>=2.5.0）有这个功能。

这是一个使用示例（文件夹demos/resizedemo）：SWFUpload_v250_beta_3_samples.zip

【讨论】：