blocks|key|2890805|text|在这种情况下，如果你停止缩小图像的大小，整个过程可能会更快。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2890806|图像有多大，包括宽度/高度和大小(mb，kb)？上传图片需要多长时间？你为什么要把图片剪下来？|2890807|我认为你的javascript中的一些地方是不正确的-+here是一种方法，在上传之前使用canvas和File+API来调整图像的大小。|offset|length|2890808|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploading^0|0|0|S|4|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

In this case it might turn out that if you stop cutting down the size of the image - the whole process will be faster.

How big are the images, both width/height and size(mb, kb)?
How long does it take to upload an image?
Why are you cutting down the images?

I think something in your javascript is not right - <a href="https://stackoverflow.com/questions/10333971/html5-pre-resize-images-before-uploading">here</a> is a way, using canvas and File API to resize image, before uploading it.

blocks|key|124656|text|这是一个很好的解决方案，它在上传之前减小了图像的大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124657|https://github.com/blueimp/jQuery-File-Upload|offset|length|124658|你没有说你是否反对使用jQuery，如果你反对，你也许能够找到一个等价的解决方案，那就是纯JavaScript。|124659|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|19|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

This is a great solution, it reduces the size of the image before the upload.

<a href="https://github.com/blueimp/jQuery-File-Upload" rel="nofollow">https://github.com/blueimp/jQuery-File-Upload</a>

You didn't say whether you were opposed to using jQuery, if you are you may be able to find an equivalent solution that is pure JavaScript.

blocks|key|122062|text|简短的回答：No，Javascript不慢，PHP也不慢。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|122063|如果图像很大(几兆字节)，在javascript/php中裁剪/调整图像大小需要一段时间。这是无法避免的。|122064|我认为你有一个性能问题，因为：|122065|122066|您同时上传了许多图像，并且..|ordered-list-item|122067|其中一些图像很大(以兆字节计)|122068|122069|在上传图片之前考虑优化图片。我建议你使用kraken.io，它可以在不改变图像质量的情况下减小图像的大小(loseless模式)。|122070|此外，请考虑按块上传图像，这将：|122071|122072|允许您跟踪上传progress|122073|AJAX-driven|122074|122075|chunk+upload插件有很多，下面是其中之一：|122076|https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads|122077|最后但并非最不重要的一点是，看看kraken.io本身，你可能学到了一些关于如何加速图片上传的东西。|122078|entityMap|0|LINK|mutability|MUTABLE|url|https://kraken.io/|1^0|6|2|0|0|0|0|0|0|0|1H|8|K|9|0|0|0|0|0|0|0|0|0|1Z|1|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1I|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1J|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|1L|8|@]|D|@]|E|$]]|$1|N|3|O|5|M|7|1M|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|S|3|T|5|6|7|1U|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]|$1|V|3|W|5|M|7|1W|8|@]|D|@]|E|$]]|$1|X|3|Y|5|M|7|1X|8|@]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|10|3|11|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|20|8|@]|D|@$9|21|A|22|1|23]]|E|$]]|$1|14|3|15|5|6|7|24|8|@]|D|@]|E|$]]|$1|16|3|-4|5|6|7|25|8|@]|D|@]|E|$]]]|17|$18|$5|19|1A|1B|E|$1C|1D]]|1E|$5|19|1A|1B|E|$1C|13]]]]

Short Answer: No, Javascript is not slow, neither PHP.

If the image is big (some megabytes), it will take a moment to crop/resize the image in javascript/php. There is no way to avoid it.

I believe you're having a performance issue because:

<ol>
<li>You are uploading many images at once, and..</li>
<li>Some of them are big (by megabytes)</li>
</ol>

Consider optimizing images before uploading them. I suggest you use <a href="https://kraken.io/" rel="noreferrer">kraken.io</a>, which you can reduce the size of the images without changing image quality (loseless mode).

Also, consider uploading images by chunks, which:

<ol>
<li>Allows you to track upload progress</li>
<li>AJAX-driven</li>
</ol>

There are many chunk upload plugins, here is one of them:

<a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads" rel="noreferrer">https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads</a>

Last but not least, look at kraken.io itself, maybe you learn few things on how to speed up image uploading.

blocks|key|122867|text|我认为，即使你最终找到了一个更好的优化算法，如果我们讨论的是移动电话，你也应该考虑到网络可能相当慢，CPU也可能。我的建议是尝试一下web+workers，this+tutorial可能会很有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|122868|web工作者独立于用户交互在后台运行脚本，这对于避免对用户的影响以及在后台管理图像处理和上传非常有用。|122869|两个主要优势：|122870|122871|您可以并行运行多个线程/+web工作器|unordered-list-item|122872|+web工作器不阻塞主线程和用户体验|122873|122874|这样做的优点不仅可以加快图像处理的速度，而且从整体上避免了用户界面的冻结。|122875|entityMap|0|LINK|mutability|MUTABLE|url|https://html.spec.whatwg.org/multipage/workers.html|1|http://www.html5rocks.com/en/tutorials/file/filesystem-sync/^0|1U|B|0|26|D|1|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]|$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|18|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|19|8|@]|9|@]|C|$]]|$1|I|3|J|5|K|7|1A|8|@]|9|@]|C|$]]|$1|L|3|M|5|K|7|1B|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|1D|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

I think that even if you find a better optimization algorithm at the end of the day if we are talking about mobile phones you should consider that network could be pretty slow and also the CPU could. My suggestion is to give a try to <a href="https://html.spec.whatwg.org/multipage/workers.html" rel="nofollow">web workers</a> and there is <a href="http://www.html5rocks.com/en/tutorials/file/filesystem-sync/" rel="nofollow">this tutorial</a> could be very helpful.

The web workers run scripts in the background independently from user interaction and this could be very useful to avoid impact on the user and manage image processing and upload in the background.

Two main advantages:

<ul>
<li>you can run multiple threads / web workers in parallel</li>
<li>the web workers do not block the main thread and the user experience</li>
</ul>

Does advantages could not only to speed up the image processing but overall avoid to freeze the user interface.

blocks|key|124808|text|不，上传仍然会很慢。速度几乎与代码无关。它会很慢的主要原因是图像会占用很大的空间。通常高达许多兆字节。如果要上传一个文本字符串进行比较，速度会快得多，因为该文本字符串只有几个字节或千字节。有一种方法可以让这个过程更快一些，那就是在上传到服务器之前将图像放在一个压缩的.zip文件夹中。不过，这仍然需要很长时间。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124809|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

No, the upload still will be slow. The speed pretty much has nothing to do with the code. The main reason it would be slow is that images can take up a lot of space. Usually up to many megabytes. If you were to upload a string of text for comparison, it would be a lot faster as that string of text is only a few bytes or kilobytes. The one way that would make this a little faster is to put the image in a compressed .zip folder before uploading to server. It still would take really long though.

blocks|key|2891072|text|让我们系统地面对这个挑战吧！您的任务非常简单:尽可能快地将X字节从用户计算机发送到服务器Y。让我们假设一旦数据到达服务器，处理时间可以忽略不计-任何现代服务器都可以非常快地处理大图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2891073|我们可以将可能的解决方案分为两类：|2891074|2891075|减小X-减少发送的数据量。在JavaScript中缩小用户端的图像，并将较小的图像发送到服务器Y。|ordered-list-item|2891076|将服务器Y移动到离用户更近的位置(令人惊讶的是，没有人提到这一点？)没有必要在世界各地部署多个服务器，您可以只使用CDN+(其中许多都是免费的或非常便宜)。尽管CDN最终仍会访问您的web服务器，但通常可以放心地假设CDN提供商拥有比普通用户更好的国际带宽。|2891077|2891078|额外说明：|2891079|2891080|做了一些速度测试，你当前的服务器可能有带宽问题，图像上传速度比正常速度慢得多。通过简单地将站点移动到另一家托管公司，您的图像上传可能会在您的应用程序UX上变为faster.|2891081|Depending，您可以通过在文件被选择时立即显示图像缩略图(在JS端完成)来提高用户感知的速度，同时文件仍在上传中。你甚至可以允许用户在上传时在页面/站点上移动-如果你不阻止UI，缓慢的上传就不会那么烦人了。|2891082|2891083|一般来说，这是一个复杂的问题，没有单一的方法-它是一组步骤。如果某个用户的连接很糟糕，那么其他的都无关紧要！|2891084|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|G|7|10|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|N|3|O|5|G|7|14|8|@]|9|@]|A|$]]|$1|P|3|Q|5|G|7|15|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|17|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|V|$]]

Let's try to face this challenge systematically! Your task is as simple as that: send X bytes from users computer to server Y as fast as possible. Let's assume that once data reaches server, processing time is negligible – any modern server can process big images very quickly.

We can divide possible solutions in two categories:

<ol>
<li>Decrease the X – decrease the amount of data being sent. Scale down the image on users side in JavaScript and send smaller images to server Y.</li>
<li>Move server Y closer to user (surprisingly nobody mentioned this?) There is no need to deploy multiple servers worldwide, you could just use a CDN (and many of them are free or very cheap today). Even though CDN would still hit your web server in the end, it's usually safe to assume that CDN providers have better international bandwidth than average user.</li>
</ol>

Extra notes:

<ol start="3">
<li>Do some speed tests, your current server may have bandwidth issues and images are being uploaded way slower than they should. By simply moving the site to another hosting company, your image uploads could become times faster.</li>
<li>Depending on your application UX, you can improve the speed as perceived by user by displaying image thumbnails as soon as files are chosen (done on JS side), while the files are still being uploaded. You could even allow the user to move around the page/site while upload is happening – if you don't block UI, slow uploads are less annoying. </li>
</ol>

In general, it's a complex issue and there is no one single approach – it's a set of steps. And if some user has a terrible connection, nothing else is going to matter!

blocks|key|124847|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124848|上传原始图像时，除非用户上传未压缩的*.bmp，否则优化收益可能微不足道。如果要在本地调整图像大小，请确保应用了适当的压缩-至少在使用canvas或JIC+(demo)之类的内容时设置toDataURL+。注意重采样质量不佳。|ordered-list-item|offset|length|style|CODE|124849|如果您期望大量上传或处理低带宽用户，则可能需要引入可恢复上传。像resumablejs这样的库将使用html5文件应用程序接口并支持分块，从而在连接不畅的情况下减少上传过程的痛苦。当与UX+enhancements!|124850|Rather结合使用时，这是一个非常强大的组合，而不是专注于上传性能，你可以通过关注对性能的感知来获得更好的结果。一个有用的模式是将上传移动到工作流程中的较早阶段-+Instagram在选择了图像后立即开始上传，并在用户处理标题、位置、共享选项时在后台继续上传。|124851|124852|在highscalability上总结了更多来自"Secrets+to+Lightning+Fast+Mobile+Design"+slides的想法|124853|📷|atomic|124854|在无人观看的情况下移动图片。图片上传在你分享它们之前启动，大多数应用程序都会等到分享屏幕之后。规则是一旦准备好就发送数据，然后将其与用户操作相匹配。这会使请求数增加一倍，但即使稍后发送了取消，感知到的性能也会提高。数据在取消时被删除。|BOLD|124855|124856|上传到CDN。Stackoverflow与imgur集成，用于图片上传和so+can+you。当然，这取决于上传的敏感性、预期功能和CDN的T&C，但可能会节省流量和存储空间，同时提供对原始图像、调整大小的副本和其他元数据的专业应用编程接口访问。|124857|124858|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/brunobar79/J-I-C|1|http://makeitsolutions.com/labs/jic/|2|https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL|3|http://resumablejs.com/|4|http://highscalability.com/blog/2012/6/7/3-secrets-to-lightning-fast-mobile-design-at-instagram.html|5|https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design?slide=74|6|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/4010d2bfb3c58738d4ad7b5756654dba.png|imageAlt|7|https://api.imgur.com/endpoints/image^0|0|I|5|2K|9|22|3|0|27|4|1|2K|A|2|0|W|B|3|0|0|0|1|F|4|O|1C|5|0|0|1|6|0|0|E|S|2H|0|0|0|3F|10|A|7|0|0^^$0|@$1|2|3|-4|4|5|6|1O|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|1P|7|@$D|1Q|E|1R|F|G]|$D|1S|E|1T|F|G]]|8|@$D|1U|E|1V|1|1W]|$D|1X|E|1Y|1|1Z]|$D|20|E|21|1|22]]|9|$]]|$1|H|3|I|4|C|6|23|7|@]|8|@$D|24|E|25|1|26]]|9|$]]|$1|J|3|K|4|C|6|27|7|@]|8|@]|9|$]]|$1|L|3|-4|4|5|6|28|7|@]|8|@]|9|$]]|$1|M|3|N|4|5|6|29|7|@]|8|@$D|2A|E|2B|1|2C]|$D|2D|E|2E|1|2F]]|9|$]]|$1|O|3|P|4|Q|6|2G|7|@]|8|@$D|2H|E|2I|1|2J]]|9|$]]|$1|R|3|S|4|5|6|2K|7|@$D|2L|E|2M|F|T]|$D|2N|E|2O|F|T]]|8|@]|9|$]]|$1|U|3|-4|4|5|6|2P|7|@]|8|@]|9|$]]|$1|V|3|W|4|C|6|2Q|7|@$D|2R|E|2S|F|T]]|8|@$D|2T|E|2U|1|2V]]|9|$]]|$1|X|3|-4|4|5|6|2W|7|@]|8|@]|9|$]]|$1|Y|3|-4|4|5|6|2X|7|@]|8|@]|9|$]]]|Z|$10|$4|11|12|13|9|$14|15]]|16|$4|11|12|13|9|$14|17]]|18|$4|11|12|13|9|$14|19]]|1A|$4|11|12|13|9|$14|1B]]|1C|$4|11|12|13|9|$14|1D]]|1E|$4|11|12|13|9|$14|1F]]|1G|$4|1H|12|1I|9|$1J|1K|1L|-4]]|1M|$4|11|12|13|9|$14|1N]]]]

<ol>
<li>When original images are uploaded, optimization gains will likely be insignificant unless your users upload uncompressed <code>*.bmp</code>. If you're re-sizing images locally, make sure suitable compression has been applied - at least setting <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL" rel="nofollow noreferrer"><code>toDataURL</code> encoderOptions</a> when working with canvas, or something like <a href="https://github.com/brunobar79/J-I-C" rel="nofollow noreferrer">JIC</a> (<a href="http://makeitsolutions.com/labs/jic/" rel="nofollow noreferrer">demo</a>). Beware of poor re-sampling quality.</li>
<li>If you expect massive uploads or deal with low bandwidth users, you may want to introduce resumable uploads. A library like <a href="http://resumablejs.com/" rel="nofollow noreferrer">resumablejs</a> would use html5 file api and support chunking, making the upload process less painful on poor connections. That's a pretty powerful combo when coupled with UX enhancements!</li>
<li>Rather than focusing on upload performance, you may achieve better results by focusing on perception of performance. A useful pattern is moving the upload to an earlier stage in the workflow - Instagram starts an upload as soon as the image has been selected and continues in the background while the user works on the caption, location, sharing options... 

More thoughts from <a href="https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design?slide=74" rel="nofollow noreferrer">"Secrets to Lightning Fast Mobile Design" slides</a> summarized on <a href="http://highscalability.com/blog/2012/6/7/3-secrets-to-lightning-fast-mobile-design-at-instagram.html" rel="nofollow noreferrer">highscalability</a>:

<img src="https://i.stack.imgur.com/FhIRV.png" alt="https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design?slide=82">

<blockquote>
 Move bits when no-one is watching. Picture uploading starts before you share them, most apps wait until after the share screen. The rule is send data as soon as it's ready, then match it with user actions later. This doubles the number of requests, but the perceived performance is improved, even if a cancel is sent out later. Data is deleted on a cancel.
</blockquote></li>
<li>Upload to a CDN. Stackoverflow integrates with imgur for image uploads and <a href="https://api.imgur.com/endpoints/image" rel="nofollow noreferrer">so can you</a>. Of course this depends on how sensitive the uploads are, expected functionality and CDN's T&amp;Cs but may save you traffic and storage while providing specialist api access to original images, resized copies and additional metadata.</li>
</ol>

I understand there are ways to upload multiple images from browser to server and also the uploading speed is base upon the speed of the server and network. 
The standard way of doing it: 

<blockquote>
 Click a upload button in the website -> choose what images you want to upload
 -> click Submit Button to upload all the images to the server (Prompt "please wait" to user) -> Upload Successful!
</blockquote>

But in terms of the coding part, I was just wondering is there a faster way to efficentily upload images from client's device to server? (Using Javascript and php)

Currently what I am doing is first "cut-down" the images in client side first, then send the images back to server. 
But this is very slow since javascript takes time to "cut-down" the size of the images. 
By "cut-down", I mean to make the image width and height smaller. 
Is there a faster way to do it? 

(Some javascript and php coding example would help as well.)

Speed Up Website's Multiple Image Upload from Client Browser to Server

图像处理

服务器

jQuery

我知道有一些方法可以将多张图片从浏览器上传到服务器，上传的速度也取决于服务器和网络的速度。这样做的标准方法是：单击网站中的上载按钮->选择要上载的图像->单击提交按钮将所有图像上载到服务器(提示“请稍候”给用户) ->上载成功！但在编码部分，我想知道有没有更快的方法有效地将图像从客户端设备上传到服务器？(使用Javas...

问加速网站从客户端浏览器到服务器的多张图片上传
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加速网站从客户端浏览器到服务器的多张图片上传EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加速网站从客户端浏览器到服务器的多张图片上传
EN