`

jquery Ajaxupload应用

阅读更多

AjaxUpload

  Jquery插件AjaxUpload实现文件上功能无需form,即可实现Ajax方式的文件上,当然根据需要也可以form

工作

1、下Jquery和文件上插件AjaxUpload

2uploadfile.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_buttonDIV文件上功能。 

前台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行:fileTypefileNum参数代表上文件的型和数量,默认值为可上所有型文件,同一时间只能上一个文件,如想上传图片文件或同多个文件,可将两个值变为picmore

6~8行:POST到服器的数据,你可以置静态值也可以通JqueryDOM操作函数得一些动态值,比如formINPUT等。

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");// 获得文件

.............. 

 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jquery 插件ajaxupload 的简单应用

    总结,jQuery插件AjaxUpload为Web开发者提供了一种高效、便捷的文件上传解决方案,它结合了jQuery的简洁API和异步文件上传的优势,帮助我们构建更富交互性的Web应用。通过理解和应用这些基础知识,你可以在实际项目...

    Jquery AjaxUpload实现文件上传实例 PHP版

    AjaxUpload是jQuery的一个插件,它提供了一种方便的异步文件上传方式,无需刷新页面即可完成文件上传,提高了用户体验。在这个“Jquery AjaxUpload实现文件上传实例 PHP版”中,我们将探讨如何使用jQuery的Ajax...

    ajaxupload无刷新文件上传,支持多文件上传,使用很方便哦

    ajaxupload.js 是一款使用jquery上传文件的js插件,对于简单的文件上传,足够可以应付, 你可以根据自身需要对前后端代码进行补充,也可以将一些...总的来说Jquery插件AjaxUpload实现文件上传功能的应用还是比较容易的。

    jquery upload ajax方式

    **jQuery Upload AJAX方式详解** 在Web开发中,文件上传是一个常见的功能,传统的文件上传通常需要刷新整个页面,用户体验较差。随着Ajax技术的发展,无刷新上传文件成为可能,jQuery结合Ajax提供了一种优雅的解决...

    jQuery+ajaxupload+imgareaselect+asp.net上传预览截取图像

    在IT行业中,前端开发经常需要处理用户上传图片的需求,而"jQuery+ajaxupload+imgareaselect+asp.net上传预览截取图像"这个主题,就是一种高效且用户体验优秀的解决方案。接下来,我们将深入探讨这些技术及其整合...

    ajaxupload.js

    AjaxUpload是一种在Web应用中实现异步文件上传的技术,它基于JavaScript的Ajax(Asynchronous JavaScript and XML)技术,允许用户在不刷新整个页面的情况下上传文件,提高了用户体验。`ajaxupload.js`是实现这一...

    jQuery ajax file upload

    总结来说,`jQuery ajax file upload`是通过`ajaxFileUpload`插件实现的一种无刷新的文件上传方式,它提高了用户体验,并且提供了丰富的自定义选项和回调机制,适用于各种Web应用的文件上传需求。要正确使用,需要...

    ajaxUpload.

    标题"ajaxUpload."和描述"ajaxUpload.ajaxUpload.ajaxUpload."暗示我们将深入探讨这个话题。 ### 一、Ajax Upload原理 Ajax Upload的核心是利用JavaScript的异步特性,通过XMLHttpRequest对象与服务器进行通信。它...

    jquery.upload.js

    《使用jQuery.upload.js实现上传功能详解》 在Web开发中,文件上传是一个常见的需求,而jQuery.upload.js是一款基于jQuery的轻量级插件,它极大地简化了文件上传的实现过程,使得开发者能够快速构建功能丰富的文件...

    JQuery.upload.rar

    《基于jQuery的文件上传插件JQuery.upload详解》 在Web开发中,文件上传功能是不可或缺的一部分,尤其在用户交互...无论是在个人项目还是企业级应用中,JQuery.upload都能以其实用性和易用性成为开发者的得力助手。

    jquery ajax demo

    在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理和Ajax交互等任务。`jQuery AJAX`是jQuery库中的一个核心功能,它极大地简化了原生JavaScript的异步数据通信过程。本教程将深入探讨...

    jQuery File Upload演示与下载

    jQuery File Upload利用HTML5的File API,通过AJAX方式实现文件的分块上传,以应对大文件上传时的性能问题。同时,它使用FormData对象存储文件数据,通过XMLHttpRequest的send方法发送到服务器。在上传过程中,插件...

    php upload文件上传代码 jquery ajax无刷新

    2. **jQuery和AjaxUpload插件**:引入jQuery库和AjaxUpload插件的JavaScript文件,然后编写JavaScript代码来绑定事件和处理上传。 ```javascript $(document).ready(function() { var options = { url: 'upload....

    asp.net jquery file upload

    ASP.NET与jQuery结合Flash实现的多文件上传技术是一种在Web应用程序中处理大量文件上传的高效方法。这种技术允许用户一次性选择多个文件进行上传,并且在上传过程中提供了可视化的进度条反馈,增强了用户体验。 ...

    AjaxUpload.rar 文件上传

    综上所述,AjaxUpload是现代Web应用中实现高效、流畅文件上传的一种重要技术,结合JavaScript和Ajax,它能提供更好的用户体验。不过,随着技术的发展,HTML5的File API和Fetch API等新特性也在逐步替代传统的Ajax...

    jQuery-File-Upload

    在网页应用中,图片上传功能是不可或缺的一部分,而jQuery File Upload插件则为开发者提供了一个强大且易用的解决方案。这款插件以其丰富的特性、广泛的语言支持以及优秀的用户体验设计,赢得了开发者们的青睐。本文...

    jQuery File Upload文件上传插件 v10.32.0.zip

    jQuery File Upload是一款功能强大的文件上传插件,专为前端开发者设计,用于在Web应用程序中实现高效、用户友好的多文件上传功能。这个插件的版本是v10.32.0,它提供了丰富的特性,使得文件上传变得更加简单且可控...

    Jquery file upload Mvc4.0实例

    【jQuery File Upload】是jQuery的一个插件,用于在网页上实现文件上传功能,它支持多文件选择、进度条显示、预览以及异步上传。在Mvc4.0框架下,结合jQuery File Upload可以构建高性能、用户体验优秀的文件上传系统...

    使用ajaxupload.js/ajaxfileupload.js实现文件上传

    总之,`ajaxupload.js` 和 `ajaxfileupload.js` 是两种实用的文件上传解决方案,它们可以帮助开发者创建高效、友好的文件上传功能,提高Web应用的交互性。通过熟练掌握这两个库的使用,你可以构建出符合用户期望的...

Global site tag (gtag.js) - Google Analytics