小编She*_*kel的帖子

我试图找出我的代码是否有问题或当前的HTML5 File API实现.

以下代码有效.在加载图像一次后重复该过程时会出现错误.

第二次选择文件时,图像blob加载,然后闪烁,图像消失.之后的后续选择通常可以正常工作(如果文件很大,有时会出现不稳定的行为).重复相同文件选择的过程通常有效(作为修复).

任何帮助将不胜感激.

使用的JavaScript库

• JQuery 1.7.1

• JQuery Tools 1.2.6

• JCrop 0.9.9

步骤 - 摘要

1. 用户通过传统<input type="file" /> 对话框选择文件.

2. onchange处理程序为输入执行并检查是否选择了文件,如果是,则验证MIME类型是image/jpeg还是image/png,以及所选文件大小是否小于250KB.如果此验证失败,则重置选择.

3. 此时,要上载的文件(图像)有效.接下来,它检查浏览器是否支持File API CreateObjectURL via if (typeof window.URL == 'undefined') return;(如果没有,则跳过后续步骤)

4. 它将图像blob加载到当前图片预览中(一个用于显示当前图像),也加载到动态生成的图像元素中,该图像元素通过jcrop裁剪功能添加到jquery工具的叠加层中.

5. 然后,用户通过jcrop裁剪图像并关闭叠加层,查看要上载的图像的裁剪预览(仅当浏览器支持CreateObjectURL且用户裁剪图像时)

代码

HTML

<div style="height: 100px; overflow: hidden; width: 100px; margin-bottom: 5px;">
    <img id="PhotoPreview" alt="Photo" src="/Content/no-photo.png" />
</div>
<input type="file" id="Photo" name="Photo" onchange="photoChanged(this.files)" />
<input type="hidden" id="PhotoCrop" name="PhotoCrop" value="" />

JavaScript window.URL = window.URL || window.webkitURL;

function photoChanged(files) {
    if (!files.length) return;
    var …