Question

我已从here版本9.12.1下载了最新插件和依赖项。

我将下载的文件复制到我的wamp服务器中，然后从 localhost / jQuery-File-Upload-9.12.1 / index.html 访问它。

选择图像文件后，在上传前会显示图像预览。但是一旦上传图像，缩略图就不会显示出来。

但是在 Inspect Element 中，缩略图的链接出现在图像src中。

文件上传到服务器文件夹并创建缩略图。

显示图像的名称和大小。

我做错了什么？

Answer 1

使用肮脏的技巧...循环直到图像准备好，然后再显示预览图像。
见jQuery: Check if image exists。在我的情况下，我在图像标记之前使用...

            while(urlExists(file.path) != 200) {
                   console.log("still loading image");
            }
            <img src="=file.path" width="100px">

问题是写图像比响应客户端要迟一点。因此，渲染到html后，此图像出现404错误。但是当我检查时，图像实际存在。如上面的代码片段，我试图在服务器成功创建图像后等待加载图像。我知道这不是一个好方法，但它有效。我相信在生产模式下不会发生此错误，我正在尝试修复在localhost上运行。

Answer 2

根据您的问题和评论，检查两件事：

首先，下载的缩略图图像在开发者窗口的网络选项卡中具有状态200或404。如果它的200，问题是别的。

如果是404：请在.htaccess文件中查看此内容：

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourdomain.com/.*$ [NC]
RewriteRule \.(gif|jpg|css)$ - [F]

以上几行告诉Apache Web Server阻止所有链接 '.gif'，'.jpg'和'.css'文件不是来自域名 'http://www.yourdomain.com/'。在上传.htaccess文件之前确保您使用相应的网站替换“yourdomain.com” 地址。

查看.htaccess中的网址是否已正确设置到您的域（即localhost）。

参考：http://www.htaccess-guide.com/hot-link-prevention-techniques/

blueimp jQuery-File-Upload在上传图像后不显示缩略图

2 个答案: