jquery Ajaxupload应用

AjaxUpload

　　Jquery插件AjaxUpload实现文件上传功能时无需创建form表单，即可实现Ajax方式的文件上传，当然根据需要也可以创建form表单。

准备工作

1、下载Jquery开发包和文件上传插件AjaxUpload。

2、创建uploadfile.html，并引入Jquery开发包和AjaxUpload插件

<script src="js/jquery-1.3.js"></script>
<script src="js/ajaxupload.3.5.js"></script>

3、根据Jquery插件AjaxUpload的需要，创建一个触发Ajax文件上传功能的DIV

<ul>
    <li id="example">
    <div id="upload_button">文件上传</div>
    <p>已上传的文件列表:</p>
            <ol class="files"></ol>
</ul>

注释：由下面的代码我们可以看到Jquery插件AjaxUpload是根据upload_button这个DIV触发文件上传功能。 

前台JS代码

　　在代码中我设置了开关，根据需要可以匹配上传文件类型，同时也可以设置是以Ajax方式实现单个文件上传还是多个文件上传。

$(document).ready(function(){
    var button = $('#upload_button'), interval;
    var fileType = "all",fileNum = "one";
    new AjaxUpload(button,{
        action: 'do/uploadfile.php',
        /*data:{
            'buttoninfo':button.text()
        },*/
        name: 'userfile',
        onSubmit : function(file, ext){
            if(fileType == "pic")
            {
                if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
                    this.setData({
                        'info': '文件类型为图片'
                    });
                } else {
                    $('<li></li>').appendTo('#example .files').text('非图片类型文件，请重传');
                    return false;              
                }
            }
                       
            button.text('文件上传中');
           
            if(fileNum == 'one')
                this.disable();
           
            interval = window.setInterval(function(){
                var text = button.text();
                if (text.length < 14){
                    button.text(text + '.');                   
                } else {
                    button.text('文件上传中');            
                }
            }, 200);
        },
        onComplete: function(file, response){
            if(response != "success")
                alert(response);
               
            button.text('文件上传');
                       
            window.clearInterval(interval);
                       
            this.enable();
           
            if(response == "success");
                $('<li></li>').appendTo('#example .files').text(file);                 
        }
    });
 
});

注释：
第1行：$(document).ready()函数，Jquery中的函数，类似于window.load，使用这个函数可在DOM载入就绪能够读取并操纵时立即调用绑定的函数。

第3行：fileType和fileNum参数代表上传文件的类型和数量，默认值为可上传所有类型文件，同一时间只能上传一个文件，如想上传图片文件或同时上传多个文件，可将这两个变量值变为pic和more。

第6~8行：POST到服务器的数据，你可以设置静态值也可以通过Jquery的DOM操作函数获得一些动态值，比如form表单中INPUT的值等。

第9行：等同于前端

<input type="file" name="userfile">

服务器端$_FILES['userfile']

第10~36行：文件上传前触发的功能。

第11~21行：图片文件类型的过滤功能，Jquery setData函数用来设置POST至服务器端的值。

第25~26行：设置同时只上传一个文件还是多个文件，如果只上传一个文件，则将触发按钮禁掉。如果要多传输几个文件，请在服务器端PHP文件上传程序中设置MAXSIZE的值，当然上传文件的大小限制同时和PHP.INI文件中的设置也有关。

第28~35行：在文件上传过程中每隔200毫秒动态更新一次按钮的文字，已实现动态提示的效果。window.setInterval函数用来每隔指定的时间就执行一次内置的函数，交互时间单位为豪秒。

第37~49行：文件上传功能完成后触发的功能，根据返回值如果服务器端报错，则前端通过ALERT方式提示出错信息。

 

 

 

<script>

   $(document).ready(function(){

      

          var thumb = $('img#thumb');    

      

          thumb.mouseover(function() {

                     thumb.css("border","2px dotted red");

          });

          thumb.mouseout(function() {

                     thumb.css("border","none");

          });

          thumb.click(function() {

                     $("span#uploadinfo").css("visibility","hidden");

                     $("span#uploadarea").css("visibility","visible");

          });

      

          new AjaxUpload('imageUpload', {

                 action: $('form#newHotnessForm').attr('action'),

                 name: 'image',

                 onSubmit: function(file, extension) {

                            $('div.preview').addClass('loading');

                 },

                 onComplete: function(file, response) {

                        thumb.load(function(){

                               $('div.preview').removeClass('loading');

                               thumb.unbind();

                        });

                 var r = JSON.parse(response);

                    

                 thumb.attr('src', r.uri);

                 $("span#uploadinfo").text(r.message);

                 $("span#uploadinfo").css("visibility","visible");

                 $("span#uploadarea").css("visibility","hidden");

                 }

         });

   });

             

</script>

<table width="110" height="140" border="0" cellpadding="0" cellspacing="0">

       <tr>

              <td align="center" class="photo_border">

                     <div class="seven columns">

                            <div class="preview">

                                   <img width="90" height="120" alt="点击上载图片" src="${f.pic}" id="thumb">

                            </div>

                            <span id="uploadinfo">点击图片更新个人照片</span>

                            <span id="uploadarea" class="wrap hotness" style="visibility:hidden">

                                   <form action="imageUpload.do" id="newHotnessForm">

                                          <input type="file" size="20"  id="imageUpload" class=" ">

                                   </form>

                            </span>

                     </div>

              </td>

       </tr>

</table>

 

 

 

Html代码如上，传给后台的file名为image

后台代码为：

@RequestMapping(value = { "/imageUpload.do" })

       public String fmUpload(HttpServletRequest request, ModelMap model) {

             

              String PhotoShowCardNo = null;

              FileOutputStream fos = null;

              String err ="";

try {
   SessionUser u = (SessionUser) WebUtils.getSessionAttribute(request,
     "SessionUser");
   MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
   MultipartFile file = multipartRequest.getFile("image");// 获得文件