澳门新葡萄京官网注册PHP的AJAX技术实现文件异步上传

异步的文件上传是在现代的AJAX实现的Web应用里面经常要遇到,必须解决的问题。但是标准的AJAX类无法实现传输文件的功能。因此,这里讨论的内容就是如何在AJAX的技术的基础之上构建异步的文件上传功能。在这个功能当中需要使用到内置的框及来传输文件。这个功能实现的效果是页面在上传文件的时候,用户还可以使用该页面并且填写文件描述。
这个例子是我们引用AJAX的经典案例进行分析的。 系统环境
较新版本的浏览器。例如Opera,Firefox或者 Internet Explorer。 PHP 4.3.0
或更高版本 PHP 5 版本 PHP 中的 ‘short_open_tag’
选项开启(否则会发生解析错误)。 功能分析
通过内置的IFRAME进行文件上传。具备包括三个部分组成。
在页面中间有一个简单的<form…表单,表单只包含了<input type=file …
>控件。这个表单的目标链接就是一个隐藏得IFRAME(通过 CSS的风格 display:
none;实现)并且表单里面唯一一个控件的OnChange事件用来触发JavaScript函数。这个函数的作用是检查用户提交的扩展名,然后提交表单。
在服务器端用PHP编写了一个处理过程。这个处理过程用来把从客户端上传的文件进行检查后保存在服务器,并且通过Javascript代码的形式返回给用户。返回给用户的Javascript脚本通过parent.window.document更改了用户现在正在查看的页面,设置了文件的名称并启用了让用户提交表单的按钮。启用按钮的操作是通过getElementById函数实现的。
在主页面还有一个表单,它包含了用户提交的描述和隐藏的文件名。用户可以在文件上传的同时填写文件的描述。当文件上传结束以后,用户点击按钮,就可以看上传以后返回给用户的文件信息了。。
可能你会说这么操作不符合常理:文件在用户确认之前就已经被提交了。如果用户没有提交的话,情况会如何呢。你可以自己在扩展处理被用户放弃的文件。
这个例子把文件存储在一个文件系统的目录下。你需要在脚本开始运行的时候配置下这个目录,具体的包含这个目录信息的变量是$upload_dir
和$web_upload_dir。这里有一个对目录是否可写的权限检查。
这里我们用到了以下几个PHP函数: move_uploaded_file –
转移一经上传到服务器的文件 fopen – 打开文件 fwrite – 把内容写入文件
fclose – 关闭文件 str_replace – 替换字符串 filesize – 返回文件大小
filemtime – 返回处理时间
你可以通过手册查到这些函数如果使用。请注意要把HTM(<, >,
)标记替换为(lt;, gt; 和 amp;). 源代码<?php$upload_dir = /var/; //
文件存储的路径$web_upload_dir = /aeu; // 文件在Web目录下的路径$tf =
$upload_dir.’/’.md5(rand())..test;$f = @fopen($tf, w);if ($f == false)
die(Fatal error! {$upload_dir} is not writable. Set ‘chmod 777
{$upload_dir}’or something like
this);fclose($f);unlink($tf);//处理上传的文件if
(isset($_POST[‘fileframe’])) { $result = ‘ERROR’; $result_msg = ‘No
FILE field found’; if (isset($_FILES[‘file’])) // 从浏览器接受文件 {
if ($_FILES[‘file’][‘error’] == UPLOAD_ERR_OK) // 没有错误 {
$filename = $_FILES[‘file’][‘name’]; // 文件名
move_uploaded_file($_FILES[‘file’][‘tmp_name’],
$upload_dir.’/’.$filename); // 处理的主过程-转移文件到 $upload_dir
$result = ‘OK’; } elseif ($_FILES[‘file’][‘error’] ==
UPLOAD_ERR_INI_SIZE) $result_msg = ‘The uploaded file exceeds the
upload_max_filesize directive in php.ini’; else $result_msg =
‘Unknown error’; } echo
‘<html><head><title>-</title></head><body>’; echo ‘<script
language=JavaScript type=text/javascript>’./n; echo ‘var parDoc =
window.parent.document;’; ‘ if ($result == ‘OK’) { echo
‘parDoc.getElementById(upload_status).value = file successfully
uploaded;’; echo ‘parDoc.getElementById(filename).value =
‘.$filename.’;’; echo ‘parDoc.getElementById(filenamei).value =
‘.$filename.’;’; echo ‘parDoc.getElementById(upload_button).disabled =
false;’; } else { echo ‘parDoc.getElementById(upload_status).value =
ERROR: ‘.$result_msg.’;’; } echo /n.’</script></body></html>’;
exit();}function safehtml($s){ $s=str_replace(, amp;, $s);
$s=str_replace(<, lt;, $s); $s=str_replace(>, gt;, $s);
$s=str_replace(‘, apos;, $s); $s=str_replace(/, quot;, $s); return
$s;}if (isset($_POST[‘description’])){ $filename =
$_POST[‘filename’]; $size = filesize($upload_dir.’/’.$filename);
$date = date(‘r’, filemtime($upload_dir.’/’.$filename)); $description =
safehtml($_POST[‘description’]); $html =<<<END
<html><head><title>{$filename} [uploaded by IFRAME Async file
uploader]</title></head> <body> <h1>{$filename}</h1>
<p>This is a file information page for your uploaded file. Bookmark
it, or send to anyone…</p> <p>Date: {$date}</p> <p>Size:
{$size} bytes</p> <p>Description: <pre>{$description}</pre>
</p> <p><a href={$web_upload_dir}/{$filename} style=font-size:
large;>download file</a><br> <a href={$PHP_SELF} style=font-size:
small;>back to file uploading</a><br> <a
href={$web_upload_dir}/upload-log.html style=font-size:
small;>upload-log</a></p> <br><br>Example by <a
href=>AnyExample</a> </body></html> END; $f =
fopen($upload_dir.’/’.$filename.’-desc.html’, w); fwrite($f, $html);
fclose($f); $msg = File {$filename} uploaded, <a
href='{$web_upload_dir}/{$filename}-desc.html’>see file information
page</a>; $f = fopen($upload_dir./upload-log.html, a); fwrite($f,
<p>$msg</p>/n); fclose($f); setcookie(‘msg’, $msg); header(Location:
$_SERVER[‘HTTP_HOST’].$PHP_SELF); exit(); } if
(isset($_COOKIE[‘msg’]) $_COOKIE[‘msg’] != ”) { if
(get_magic_quotes_gpc()) $msg = stripslashes($_COOKIE[‘msg’]);
else $msg = $_COOKIE[‘msg’]; setcookie(‘msg’, ”); } ?><!–
Beginning of main page –><html><head><title>IFRAME Async file
uploader example</title></head><body><?php if (isset($msg)) echo
‘<p style=font-weight: bold;>’.$msg.’</p>’;?> <h1>Upload
file:</h1><p>File will begin to upload just after selection.
</p><p>You may write file description, while you file is being
uploaded.</p><form action=<?=$PHP_SELF?> target=upload_iframe
method=post enctype=multipart/form-data> <input type=hidden
name=fileframe value=true> <!– Target of the form is set to hidden
iframe –> <!– From will send its post data to fileframe section of
this PHP script (see above) –> <label for=file>text file
uploader:</label><br> <!– JavaScript is called by OnChange
attribute –> <input type=file name=file id=file
onChange=jsUpload(this)></form><script type=text/javascript>/*
This function is called when user selects file in file dialog
*/function jsUpload(upload_field){ // this is just an example of
checking file extensions // if you do not need extension checking,
remove // everything down to line // upload_field.form.submit(); var
re_text = //.txt|/.xml|/.zip/i; var filename = upload_field.value; /*
Checking file type */ if (filename.search(re_text) == -1) { alert(File
does not have text(txt, xml, zip) extension);
upload_field.form.reset(); return false; } upload_field.form.submit();
document.getElementById(‘upload_status’).value = uploading file…;
upload_field.disabled = true; return true;}</script><iframe
name=upload_iframe style=width: 400px; height: 100px; display:
none;></iframe><!– For debugging purposes, it’s often useful to
removedisplay: none from style= attribute –><br>Upload
status:<br><input type=text name=upload_status id=upload_status
value=not uploaded size=64 disabled><br><br>File name:<br><input
type=text name=filenamei id=filenamei value=none disabled><form
action=<?=$PHP_SELF?> method=POST> <!– one field is disabled for
displaying-only. Other, hidden one is for sending data –> <input
type=hidden name=filename id=filename> <br><br> <label
for=photo>File description:</label><br> <textarea rows=5 cols=50
name=description></textarea> <br><br> <input type=submit
id=upload_button value=save file disabled></form><br><br><a
href=<?=$web_upload_dir?>/upload-log.html>upload-log</a><br><br><br>Example
by <a href=>AnyExample</a></body></html>

ownload:

configure and make :

  1. ./configure –user=www –group=www –prefix=/usr/local/nginx –with-http_stub_status_module –with-http_ssl_module   –add-module=/data/software/lnmp1.1-full/nginx_http_push_module-0.73 –add-module=/data/software/lnmp1.1-full/ngx_cache_purge-2.1 –add-module=/data/software/lnmp1.1-full/nginx_upload_module-2.2.0  

Nginx配置文件:

较靠谱的文章:
<?php
$temppath = $_POST[“file1_path”];
$name = $_POST[“file1_name”];
$md5 = $_POST[“file1_md5”];
$f_dir = substr($md5,0,1);
$s_dir = substr($md5,-1);
$final_file_path = “/”.$f_dir.”/”.$s_dir.”/”.$name;

echo $temppath.”<br />”;
echo $name.”<br />”;
echo $md5.”<br />”;
echo $f_dir.”<br />”;
echo $s_dir.”<br />”;
echo $final_file_path;
rename($temppath,$final_file_path);
?>

因为nginx upload
module已经做完了最费时的mime解析工作,后端的PHP代码只需要简单的移动文件到合适的位置就可以了。因为upload
module是使用C语言写的,比起PHP作解析工作的效率高多了,因此极大地提高了文件上传的效率。

二、upload module的配置参数简要说明

下边是一些配置参数的说明:

upload_pass 指明了需要后续处理的php地址
upload_cleanup 如果php出现400 404 499
500-505之类的错误,则删除上传的文件
upload_store 上传文件存放地址
upload_store_access 上传文件的访问权限,user:r是指用户可读
upload_limit_rate 上传限速,如果设置为0则表示不限制
upload_pass_form_field 从表单原样转到后端的参数,可以正则表达式表示
官方的例子是upload_pass_form_field “^submit$|^description$”;
意思是把submit,description这两个字段也原样通过upload_pass传递到后端php处理。如果希望把所有的表单字段都传给后端可以用upload_pass_form_field
“^.*$”;


背景:追求极致,由服务器脚本(比如PHP)来负责接收上传的数据。这种方式存在性能和效率的问题。所以,决定采用Nginx的上传模块来完成接收数据的功能,接收完数据后,再去转给后端脚本语言进行后续处理(比如:移动文件、插入文件的信息到数据库中)。

RFC 1867:
module for nginx web server for handling file uploads using
multipart/form-data encoding (RFC 1867) and resumable uploads according
to this protocol.
Description

The module parses request body storing all files being uploaded to a
directory specified by upload_store directive. The files are then being
stripped from body and altered request is then passed to a location
specified by upload_pass directive, thus allowing arbitrary handling of
uploaded files. Each of file fields are being replaced by a set of
fields specified by upload_set_form_field directive. The content of
each uploaded file then could be read from a file specified by
$upload_tmp_path variable or the file could be simply moved to
ultimate destination. Removal of output files is controlled by directive
upload_cleanup. If a request has a method other than POST, the module
returns error 405 (Method not allowed). Requests with such methods could
be processed in alternative location via error_page directive.

Nginx.conf

view
plainprint?

  1. user  www www;  
  2.   
  3. worker_processes 5;  
  4.   
  5. error_log  /data1/logs/nginx_error.log  crit;  
  6.   
  7. pid        /usr/local/webserver/nginx/nginx.pid;  
  8.   
  9. #Specifies the value for maximum file descriptors that can be opened by this process.  
  10. worker_rlimit_nofile 51200;  
  11.   
  12. events  
  13. {  
  14.   use epoll;  
  15.   worker_connections 51200;  
  16. }  
  17.   
  18. http  
  19. {  
  20.   include       mime.types;  
  21.   default_type  application/octet-stream;  
  22.   
  23.   #charset  gb2312;  
  24.   
  25.   server_names_hash_bucket_size 128;  
  26.   client_header_buffer_size 32k;  
  27.   large_client_header_buffers 4 32k;  
  28.   client_max_body_size 8m;  
  29.   
  30.   sendfile on;  
  31.   tcp_nopush     on;  
  32.   
  33.   keepalive_timeout 60;  
  34.   
  35.   tcp_nodelay on;  
  36.   
  37.   fastcgi_connect_timeout 300;  
  38.   fastcgi_send_timeout 300;  
  39.   fastcgi_read_timeout 300;  
  40.   fastcgi_buffer_size 64k;  
  41.   fastcgi_buffers 4 64k;  
  42.   fastcgi_busy_buffers_size 128k;  
  43.   fastcgi_temp_file_write_size 128k;  
  44.   
  45.   gzip on;  
  46.   gzip_min_length  1k;  
  47.   gzip_buffers     4 16k;  
  48.   gzip_http_version 1.0;  
  49.   gzip_comp_level 2;  
  50.   gzip_types       text/plain application/x-javascript text/css application/xml;  
  51.   gzip_vary on;  
  52.   
  53.     server  
  54.     {  
  55.         listen 80;  
  56.         server_name test.local;  
  57.         index index.php index.shtml index.htm index.html;  
  58.         root  /data/app/test.local/wwwroot;  
  59.         access_log  off;  
  60.   
  61.         location /upload {  
  62.             upload_pass     /index.php?c=uploader&a=upload_server;  
  63.             upload_cleanup 400 404 499 500-505;  
  64.             upload_store    /data/app/test.local/upload_tmp;  
  65.             upload_store_access user:r;  
  66.             upload_limit_rate 128k;  
  67.             upload_set_form_field “${upload_field_name}_name” $upload_file_name;  
  68.             upload_set_form_field “${upload_field_name}_content_type” $upload_content_type;  
  69.             upload_set_form_field “${upload_field_name}_path” $upload_tmp_path;  
  70.             upload_aggregate_form_field “${upload_field_name}_md5” $upload_file_md5;  
  71.             upload_aggregate_form_field “${upload_field_name}_size” $upload_file_size;  
  72.             upload_pass_form_field “^.*$”;  
  73.         }  
  74.   
  75.         location ~ .*.php?$  
  76.         {  
  77.             #include fastcgi_params;  
  78.             fastcgi_pass  127.0.0.1:9000;   
  79.             fastcgi_index index.php;        
  80.             include fcgi.conf;              
  81.         }  
  82.   
  83.         location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$ {  
  84.             expires      30d;  
  85.         }  
  86.   
  87.         location ~ .*.(js|css)?$ {  
  88.             expires      1d;  
  89.         }  
  90.   
  91.   
  92.     }  
  93. }  

1.上面的#include fastcgi_params; 被我注释掉了,否则出现:405 Method
not allowed ,查了下:
Nginx 静态文件中的 POST 请求返还 405 Method not allowed
错误,于是用了9000的PHP端口。
index.php 内容:

view
plainprint?

  1. <?php                     
  2. print_r($_POST);          
  3. echo $upload_tmp_path;    
  4. $temppath = $_POST[“file1_path”];  
  5. $name = $_POST[“file1_name”];  
  6. $md5 = $_POST[“file1_md5”];  
  7. $f_dir = substr($md5,0,1);  
  8. $s_dir = substr($md5,-1);  
  9. $final_file_path = “/”.$f_dir.”/”.$s_dir.”/”.$name;  
  10.   
  11. echo $temppath.”<br />”;  
  12. echo $name.”<br />”;  
  13. echo $md5.”<br />”;  
  14. echo $f_dir.”<br />”;  
  15. echo $s_dir.”<br />”;  
  16. echo $final_file_path;  
  17. rename($temppath,$final_file_path);  
  18. ?>                          

上传后返回:
Array
(
    [file1_name] => 6597350142123536341.jpg
    [file1_content_type] => image/jpeg
    [file1_path] => /data/app/test.local/upload_tmp/0000000001
    [file1_md5] => 5a84d879e497bf64acebdc84c4701a76
    [file1_size] => 110001
    [file2] => 
    [file3] => 
    [file4] => 
    [file5] => 
    [file6] => 
    [submit] => Upload
    [test] => value
)
先看一下这个上传目录的结构是这样的,这些编号的都是上传的素材,没有后缀:
/data/app/test.local/upload_tmp# ls
0000000001  0006630963  0006630964

查看目录下有没有这个文件:
ls /data/app/test.local/upload_tmp/0000000001
/data/app/test.local/upload_tmp/0000000001
sz 下来,更名为.jpg的:
sz  /data/app/test.local/upload_tmp/0000000001 ==》0000000001.jpg
,打开一看果然是我上传的文件,得证!

把这个文件放到自己定义的目录下:

view
plainprint?

  1. <?php                                   
  2. $temppath = $_POST[“file1_path”];       
  3. $name = $_POST[“file1_name”];           
  4. $orgFileName = “/data1/files/”.$name;   
  5. rename($temppath,$orgFileName);         
  6. ?>                                      

多个文件的一个情况,也就是多个文件的POST数组规律,去进行移动文件即可:
<input type=”file” name=”file2″>
<input type=”file” name=”file2″>
  
[file1_name] => 1332460275090024.jpg
[file1_content_type] => image/jpeg
[file1_path] => /data/app/test.local/upload_tmp/0000000034
[file1_md5] => 4e84aac3bc2cc25b7c69c7b506e4967f
[file1_size] => 73702
[file2_name] => desktop.ini
[file2_content_type] => application/octet-stream
[file2_path] => /data/app/test.local/upload_tmp/0000000035
[file2_md5] => dc723b859dec1526568ad581aec334d5

因为nginx upload
module已经做完了最费时的mime解析工作,后端的PHP代码只需要简单的移动文件到合适的位置就可以了。因为upload
module是使用C语言写的,比起PHP作解析工作的效率高多了,因此极大地提高了文件上传的效率。

upload_cleanup 如果php出现400 404 499

500-505之类的错误,则删除上传的文件,这块可以利用PHP进行逻辑判断后输出header头来进行操作是否删除文件。

补安装编译方法:
1.下载
wget

2.编译(在NGINX编译目录执行以下命令, 其中
–add-module=你下载解压的上传插件目录)
./configure –user=www –group=www –prefix=/usr/local/webserver/nginx
–with-http_stub_status_module –with-http_ssl_module  
–add-module=/root/software/nginx_http_push_module-0.692  
–add-module=/root/software/ngx_cache_purge-1.3
–add-module=/root/software/nginx_upload_module-2.2.0

3.上传界面:

参考来源:
1)nginx上传模块—nginx upload
module安装:
2)写得很简洁的安装方法:  【该文里提到的接受PHP,这块没有做详细的配置,参考上面这篇文章即可。】
3)  
//这一篇文章描述到:upload_pass    
/index.php?c=uploader&a=upload_server;
也就是有框架时怎么用框架的action来进行处理。


最后,后记备查用相关模块的使用:
听说有一个哥们解决了get的问题,通过相关nginx的指令实现的,没实践:
还有实现断点续传,进度显示等的:
最近做一个产品,需要实现从网页上传文件给服务器。一般情况下都是采用Ajax异步方式,创建一个iframe,在iframe里面把数据以form方式提交给后端的服务器脚本,由服务器脚本(比如PHP)来负责接收上传的数据。这种方式存在性能和效率的问题。所以,决定采用Nginx的上传模块来完成接收数据的功能,接收完数据后,再去转给后端脚本语言进行后续处理(比如:移动文件、插入文件的信息到数据库中)。同时,由于需要在前端展现上传的进度,因此可以利用Nginx一个uploadprogress模块来获取。
     整个处理框图如下:
     澳门新葡萄京官网注册 1

实现步骤:
    
1、查看Nginx是否安装了这两个模块(nginx_upload_module和nginx_uploadprogress_module),命令nginx
-V
(注意是大写),可以查看Nginx当时编译时候的参数,如果发现有上述两个模块,说明Nginx已经安装了这两个模块。如果没有的话,就需要安装这两个Nginx模块。由于这两个模块不在Nginx源代码中,需要重新编译Nginx,在编译选项中加上
    –add-module=/模块源代码路径/nginx_upload_module-2.2.0
–add-module=/模块源代码路径/nginx_uploadprogress_module-0.8.2 。
      2、由于产品的前端使用的是jQuery框架,所以,找了一个现成的jQuery下的上传文件插件(ajaxfileupload)。该代码基本原理就是动态创建一个iframe,在iframe中再增加一个form,最后数据放到这个form中提交给服务器,代码量比较小也就200来行代码。前端的代码如下:

view
plainprint?

  1. <script type=”text/javascript” src=”” ></script>  
  2. <script type=”text/javascript”>  
  3.     function uploadfile(){          
  4.         $.ajaxFileUpload({  
  5.             url:’ 
  6.             sercureuri:false, 
  7.             fileElementId:’fileToUpload’, 
  8.             dataType:’json’, 
  9.             success:function(data,status){ 
  10.                 if(typeof(data.error) != ‘undefined’){ 
  11.                     if(data.error != ”)  
  12.                         alert(data.error);  
  13.                 }  
  14.                 else{  
  15.                     alert(data.msg);  
  16.                 }  
  17.             },  
  18.             error:function(data,status, e){  
  19.                 alert(e);  
  20.             }  
  21.         });  
  22.         return false;  
  23.     }     
  24. </script>  
  25. <div>  
  26. <input type=”file” name=”addfile” size=”50″ id=”fileToUpload” />  
  27. <input type=”button” value=”上传” onclick=”return uploadfile();”/>  
  28. </div>  

其中,success的回调函数参数是服务器返给浏览器的结果。
3、配置Nginx,实现上传模块来接收页面上传的文件。把下面配置添加到Nginx的配置文件中,注意是加在server的上下文中。
        location = /upload {
                upload_pass    
/service.php?path=uploadfile&a=upload_server;//表示Nginx接收完上传的文件后,然后交给后端处理的地址
                upload_cleanup 400 404 499 500-505;
//表示当发生这些http status代码的情况下,会把上传的文件删除
                upload_store    /tmp/upload_tmp
1;//上传模块接收到的文件临时存放的路径, 1
表示方式,该方式是需要在/tmp/upload_tmp下创建以0到9为目录名称的目录,上传时候会进行一个散列处理。
                upload_store_access user:r; //指定访问模式
                upload_limit_rate 128k; //设定上传速度上限
                upload_set_form_field “${upload_field_name}_name”
$upload_file_name;
//设定后续脚本语言访问的变量,其中${upload_field_name}对照本例子就是addfile。比如后台PHP就可以通过$_POST[‘addfile_name’]来获取上传文件的名称。
                upload_set_form_field
“${upload_field_name}_content_type” $upload_content_type;//同上
                upload_set_form_field “${upload_field_name}_path”
$upload_tmp_path;//由于在upload_store设置了临时文件存放根路径,该路径就是经过散裂后上传文件存在真实路径,比如后续处理可以根据这值把上传文件拷贝或者移动到指定的目录下。
                upload_pass_form_field “^.*$”;//
                upload_pass_args on;//
打开开关,意思就是把前端脚本请求的参数会传给后端的脚本语言,比如:
        }
4、上述配置完了,就可以实现上传的功能了。但是,要获取上传的进度,那还是需要配置另外一个模块nginx_uploadprogress_module。其实,获取当前进度原理比较简单,就是通过javascript以异步方式定时给特定地址发送请求,这个模块会以json格式返回上传的进度。配置比较简单。
          1)、首先打开这个模块功能,在Nginx配置文件中http上下文里面,增加upload_progress
proxied
5m;其中,proxied表示名称(zone_name官方文档),5m表示每次链接存放跟踪信息的大小。另外,再设置返回格式为json,upload_progress_json_output;
          2)、在上述的location = /upload中增加一个配置项track_uploads
proxied 30s;
其中,proxied就是刚才在第一步设置的名字,30s表示每次链接处理完毕后,链接会保持30s。
          3)、设置一个location来处理javascript发送请求。
          location ^~ /progress {

  report_uploads proxied;    #GET此地址得到上传进度
}
           4)、还有一个参数考虑设置upload_progress_header
,这个值缺省是X-Progress-ID。有点类似SessionID,主要用在前台需要在上传文件的时候需要设置这个参数值,比如设置为uuid值。这样javascript每次发送请求要获取上传进度时候,都需要带上这个参数,这样上传进度跟踪模块才知道是返回那个链接的进度。
          
经过这三步骤,就把上传进度跟踪模块配置好了。现在就需要对前台脚本就行修改
5、修改第2步的前台脚本

view
plainprint?

  1. <script type=”text/javascript” src=”” ></script>  
  2. <script type=”text/javascript”>  
  3.     <strong>var interval = undefined;</strong>  
  4.     function uploadfile(){    
  5.         var uuid = “”;  
  6.         for (var i = 0; i < 32; i++) {  
  7.             uuid += Math.floor(Math.random() *16).toString(16);  
  8.         }        
  9.         $.ajaxFileUpload({  
  10.             url:” + uuid</strong>,//上传的地址  
  11.             sercureuri:false,  
  12.             fileElementId:’fileToUpload’,  
  13.             dataType:’json’,  
  14.             success:function(data,status){  
  15.                 if(typeof(data.error) != ‘undefined’){  
  16.                     if(data.error != ”)  
  17.                         alert(data.error);  
  18.                 }  
  19.                 else{  
  20.                     alert(data.msg);  
  21.                 }  
  22.             },  
  23.             error:function(data,status, e){  
  24.                 alert(e);  
  25.             }  
  26.         });  
  27.       <strong>  interval = window.setInterval(  
  28.            function () {  
  29.              getUploadProgress(uuid);  
  30.            },  
  31.            2000  
  32.          );</strong>  
  33.         return false;  
  34.     }     
  35.  <strong>   function getUploadProgress(uuid){  
  36.       etajax.sendRequest(‘” + uuid,getUploadProgressCallback);  
  37.     }  
  38.     function getUploadProgressCallback(type, json, http){  
  39.         if(type == “load”){  
  40.             var bar = document.getElementById(‘tp’);  
  41.             if(json.state == “uploading”){  
  42.                    
  43.                  var w =  Math.floor(json.received * 100.0 / json.size) ;  
  44.                  bar.innerHTML = w + “%”;  
  45.             }  
  46.                 /* we are done, stop the interval */  
  47.              if (json.state == ‘done’) {  
  48.                 bar.innerHTML = “100%”;  
  49.                  window.clearTimeout(interval);  
  50.             }  
  51.         }  
  52.     }     </strong>  
  53. </script>  
  54. <div>  
  55. <input type=”file” name=”addfile” size=”50″ id=”fileToUpload” />  
  56. <input type=”button” value=”上传” onclick=”return uploadfile();”/>  
  57. </div>  
  58. <strong><div>  
  59.     <div id=”tp”>0%</div>  
  60. </div></strong>  

上述黑体就是增加的代码,其中,有些函数是调用产品封装好的函数,所以,不要全部照搬。主要是抓住以下几个要点就可以了:
    1、在上传文件时候需要增加一个uuid,对应的参数就是upload_progress_header设置的,缺省是X-Progress-ID。
    2、在请求获取进度的时候,都要带上这个uuid。
    3、设定一个定时期,定时发送异步的GET方式请求,获取进度数据。
    4、返回的json格式是{”state”:”uploading”,
“size”:3232,”received”:34},其中上传完毕state值为done,如果发生错误会,state就是error,并且会返回status,错误编码。
    
    步骤就介绍在这里了。另外,javascript方式上传文件,在用户上传文件时候,最好能获取上传文件大小,这样可以提前告诉用户是否超出允许上传的大小值。但是,目前javascript方式获取文件大小要兼容所有浏览器还是存在问题。我打算还是写个flash,通过flash方式来获取,比较保险。

来自:

更多参考:

作者:justwinit@向东博客 专注WEB应用
构架之美 — 构架之美,在于尽态极妍 |
应用之美,在于药到病除
地址:
版权所有。转载时必须以链接形式注明作者和原始出处及本声明!

发表评论

电子邮件地址不会被公开。 必填项已用*标注