论坛首页 入门技术论坛

ajaxfileupload ajax文件上传

浏览 13176 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-12-20  

这学期忙于迎接学院评估和教学很久没有学新东西,昨天看了一下ajaxfileupload文件上传的插件,试做了一下效果不出,于是录制了视频.具体代码如下:

请求页面:index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'index.jsp' starting page</title>
 <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
 <script type="text/javascript" src="js/jquery.blockUI.js"></script>
 <script type="text/javascript" src="js/ajaxfileupload.js"></script>
  </head>
  <script type="text/javascript">
   function ajaxupload()
   {
    $.blockUI.defaults.fadeOut=4500;
    //1.ajax开始上传前锁定界面
    //$.blockUI({message:"<img src='imgs/loading.gif'/>文件上传中..."});
    $("#start").ajaxStart(function(){
     $.blockUI({message:"<img src='imgs/loading.gif'/>文件上传中..."});
    });
    //2.上传
    $.ajaxFileUpload
  (
   {
    url:'doFileUpload.jsp',
    secureuri:false,
    fileElementId:'upfile',
    dataType: 'json',
    success: function (data, status)
    {
     //如果文件上传成功
     $.blockUI({message:data.msg});
    },
    error: function (data, status, e)
    {
     $.blockUI({message:data.erro});
    }
   }
  )
  
  //3 .ajax完成解锁
  $("#start").ajaxComplete(function(){
   $.unblockUI();
  });
  
   }
  </script>
 
  <body>
   <div id="start"></div>
    <form action="doFileUpload.jsp" method="post"  enctype="multipart/form-data">
     <input type="file" name="upfile" id="upfile"/><input type="button" value="ajaxfileupload" onclick="ajaxupload();"/><input type="submit" value="upload"/>
    </form>
  </body>
</html>
////////////////////////////////////////////////////////////////////////////////////////////

服务器处理页面:doFileUpload.jsjp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="com.jspsmart.upload.*"%>
<%
 //smartupload 就是一个文件上传的javabean
 //1.创建一个smartupload 类的对象
 SmartUpload sm = new SmartUpload();
 
 //2. 把传来byte数据进行封装 进行初始化
 sm.initialize(pageContext);
 
 //3. 准备上传
 sm.upload();
 
 //4.保存上传文件
 int i=sm.save("/upload/");//smartupload 默认时需要文件上传的路径是存在,
 if(i>0)
 {
  out.println("{msg:'文件上传成功!!!'}");
 }
 else
 {
  out.println("{erro:'文件有错误'}");
 }
%>

//////////////////////////////////////////////////////////////

笔记:

学习方法问题:

       Java:语言  à工具(规则)  特点: (原代码,帮助手册,网络社区)   思想:thinking in  java 、设计模式 gof

      

今天要讲得内容:

1>     ajsxFileUpload

2>     目的:

 

 

准备:

1. Jquery.js 库文件

http://bbs.jquery.org.cn/

2. ajaxFileUpload.js 库文件 

http://www.phpletter.com/Our-Projects/AjaxFileUpload/

       3. Jquery blockUi

       4. smartUpload.jar 进行上传

开始做:

1.       开发一种试:先把服务器端处理页面做好。

2.       事件触发:ajaxupload()上传方法

1>     上传时锁定我们界面 blockUI.js 依赖于jquery.js

2>     上传 ajaxFilUpload.js jquery插件

--导入ajaxfileupload.js

--ajaxUploadFile方法说明:

$.ajaxFileUpload

              (

                     {

                            url:'doajaxfileupload.php', //服务器处理地址

                            secureuri:false,  // ?

                            fileElementId:'fileToUpload', // 上传文件域的ID

                            dataType: 'json', // 服务器返回数据格式

                            success: function (data, status)//上传成功后操作

                            {

                                   if(typeof(data.error) != 'undefined')

                                   {

                                          if(data.error != '')

                                          {

                                                 alert(data.error);

                                          }else

                                          {

                                                 alert(data.msg);

                                          }

                                   }

                            },

                            error: function (data, status, e) //有错误时进行操作

                            {

                                   alert(e);

                            }

                     }

              )

 

3>     完成过后解锁。

如果有兴趣:我把视频笔记和项目全部上传到了:

http://www.chubeibao.com/bbs/viewthread.php?tid=2396&extra=page%3D1

 

最近突然对flex 和fms感兴趣.如有这方面资料的朋友请共享.我将非常感谢!!!!!

论坛首页 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics