ajax图片上传:ajaxfileupload插件json格式返回问题

ajaxfileupload.js无刷新上传插件原理:通过iframe实现无刷新上传效果,因此其浏览器的兼容性很好,能兼容所有浏览器,包括ie7+,但是这个插件本身源码有一些问题:

1.在高版本的jquery中会提示找不到某一方法;

2.返回json格式时,执行的是error方法,而不是success方法。

经多方研究解决了这两个问题,修复后的ajaxfileupload.js下载地址:

https://pan.baidu.com/s/1jImLGF0

Nginx与Apache性能对比

1.相同点:

(1)都是HTTP服务器软件

(2)功能上都采用模块化结构设计

(3)都支持通用的语言接口,如PHP、Perl、Python等

(4)都支持正向、反向代理、虚拟主机、URL重写、压缩传输、SSL加密传输

2.不同点:

(1)Apache处理速度很慢,占用很多内存资源

(2)功能上,Apache所有模块支持动静态编译,Nginx模块都是静态编译的

(3)对Fastcgi的支持:Apache支持的很不好,Nginx支持非常好

(4)处理连接方式:Nginx支持epoll,Apache不支持

(5)空间使用上:Nginx安装包仅几百K

3.nginx 相对 apache 的优点:

(1)轻量级:同样起web 服务,比apache占用更少的内存及资源

(2)抗并发:nginx 处理请求是异步非阻塞的,而apache 则是阻塞型的,在高并发下nginx 能保持低资源低消耗高性能

(3)可以作简单的负载均衡器使用,以提高并发能力

(4)支持热部署:配置文件修改后可以reload,而不用重启

(5)nginx对fastcgi的支持非常好,而Apache支持的不太好

4.apache相对nginx的优点:

(1)稳定性强于nginx

(2)重写rewrite功能强于nginx

 

Nginx性能优化

优化nginx包括两方面:

1.是自己重写nginx代码(比如tengine)、本身nginx的代码已经足够优秀,如果不是每秒几千的请求,就忽略这个部分吧;

2.另一个就是和优化nginx的配置,这是中小型网站可以重点优化的部分。

nginx的配置文件是一种声明式定义,控制nginx的每一个细节。

所谓负载调优,就是提高单台机器处理效率,降低单台机器的负载。

为了提高单台机器的处理效率,cpu的处理速度是足够快的,我们能解决的就是降低磁盘I/O、网络I/O,减少内存使用。

降低单台机器的负载我们能做的就是负载均衡,把流量打到多台机器处理。

nginx推荐优化内容:

1.open files数量优化
ulimit -a查看系统参数
其中
open files (-n) 1024
表示系统同时最多能打开的文件数,linux下的所有设备都可以认为是文件,包括网络连接,如果同时超过1024个连接,那么nginx的日志就会报“24: Too many open files”

多以优化的第一步就是设置open files为ulimit

修改/etc/profile,增加
ulimit -n 65535
2.Worker Processes数量优化
通常来说设置一个cpu核心对应一个worker processer,最多不超过4个,提高worker process的值是为了提高计算能力,但一般在越到cpu瓶颈前,你会遇到别的瓶颈(如网络问题)。

只有当你要处理大量静态文件的磁盘I/O时,worker进程是单线程的,所以这个读取文件的阻塞IO会降低CPU的处理速度,这是可以增加worker进程数量,其它情况是不需要的。
3.worker进程连接数优化(Worker Connections)
默认情况下这个值是worker_connections 1024,也就是说考虑到keep-alive超时65秒,每个浏览器平均消耗两个链接(chrome会同时打开多个连接来提到加载速度)。

那么默认情况下nginx平均每秒能处理1024/65/2=8,那么8*86440=64w,差不多相当于每天有60万ip。

多以普通网站默认值就可以了,如果你的流量一直提升,可以考虑增加这个值为2048或者更高。
3. CPU Affinity
用来设置worker进程使用哪个cpu核心处理请求并且一直使用这个cpu核心。如果你不知道cpu调度,最好别碰这个,操作系统比你更懂如何调度。
4. Keep Alive
Keep alive 没有数据传输的情况下保持客户端和服务端的连接,也就是保持空连接一段时间,避免重现建立链接的时间消耗。nginx处理空连接的效率非常高,1万个空连接大约消耗2.5M内存。如果流量非常大的网站,减少建立连接的时间开销是非常客观的。keep alive的值设置在10-20s之间比较合理。
5. tcp_nodelay 和 tcp_nopush优化
这两个指令影响nginx的底层网络,它们决定操作系统如何处理网络层buffer和什么时候把buffer内容刷新给终端用户。如果你不懂,就可以保持这两个指令默认不变,对nginx性能影响不明显。
6. access日志优化
默认情况下,access日志会记录所有请求到日志文件,写操作会增加IO操作,如果不需要统计信息,可以使用百度统计或者cnzz统计,完全可以关闭日志,来减少磁盘写,或者写入内存文件,提高IO效率。
7. Error日志优化
错误日志会记录运行中的错误,如果设置的太低,会记录的信息太多,会产生大量IO,推荐设置为warn,这样可以记录大部分信息,而不会有太多IO
8. Open File Cache
nginx会读文件系统的许多文件,如果这些文件的描述符能够缓存起来,那么会提高处理效率。详见http://wiki.nginx.org/HttpCoreModule#open_file_cache
9. Buffers size优化
buffer的大小是你需要调优最重要参数。如果buffer size太小就会到导致nginx使用临时文件存储response,这会引起磁盘读写IO,流量越大问题越明显。

client_body_buffer_size 处理客户端请求体buffer大小。用来处理POST提交数据,上传文件等。client_body_buffer_size 需要足够大以容纳如果需要上传POST数据。

fastcgi_buffers,proxy_buffers 处理后端响应。如果这个buffer不够大,同样会引起磁盘都系IO。需要注意的是它们有一个上限值,这个上限值受 fastcgi_max_temp_file_size 、 proxy_max_temp_file_size控制。
10.磁盘IO
如果能把数据全放到内存,不使用磁盘就可以完全去掉磁盘IO。 默认情况下操作系统也会缓存频繁访问的数据以降低IO。所以预算足够的情况加,加大内存。
11.网络IO
假设我们没有了磁盘IO,所有数据都在内存,那么我们的读IO大概有3-6gbps。这种情况下,如果你网络差,一样会很慢。所以尽可能提高网络带宽,压缩传输数据。

网络带宽买你能买的起的最大带宽,nginx的gzip模块可以用来压缩传输数据,通常gzip_comp_level 设为 4-5,再高就是浪费cpu了。同时也可以采用css,js压缩技术,当然这些技术就与nginx优化无关了。。
绝招
如果你还想提高nginx处理能力,只能祭出大杀器了。别优化了,加机器吧。一点点优化是没有用的,不如扩展机器来的快些。

(chrome)访问UEditor上传图片时文件选择框延迟弹出的解决方法

在谷歌浏览器里,使用Ueditor时有一个问题,就是在上传图片时,点击按钮弹出文件选择框时,大约需要8秒才能弹出
这里写图片描述
解决方法:
1、单张图片:修改ueditor.all.js(ueditor.all.min.js)第24429行左右,将accept的值从image/*改成
image/jpeg,image/png,image/jpg,image/gif,image/bmp

UE.plugin.register('simpleupload', function (){
 //中间的代码略
 '<input id="edui_input_' + timestrap + '" type="file" accept="image/jpeg,image/png,image/jpg,image/gif,image/bmp" name="' + me.options.imageFieldName + '" ' +

这里有方法检查是否修改成功,在单张图片按钮上右键选择【检查】,看Elements里代码,是否如下图所示
这里写图片描述
2、多张图片:修改dialogs/image/image.js的第370行左右,将mimeTypes的值从image/*改成
image/jpeg,image/png,image/jpg,image/gif,image/bmp

uploader = _this.uploader = WebUploader.create({
           pick: {
               id: '#filePickerReady',
               label: lang.uploadSelectFile
           },
           accept: {
              title: 'Images',
              extensions: acceptExtensions,
              mimeTypes: 'image/jpeg,image/png,image/jpg,image/gif,image/bmp' 
              },
             //后面的代码略

这里有方法检查是否修改成功,点击多张图片按钮会弹出一个层,在【点击选择图片】上右键选择【检查】,看Elements里代码,是否如下图所示
这里写图片描述

切记:修改完了发现没有效果,可能是缓存造成的,清理缓存就是了。

参考:http://blog.csdn.net/lhtzbj12/article/details/53673601