집 > 기사 > 웹 프론트엔드 > jQuery 플러그인 AjaxFileUpload는 ajax 파일 upload_jquery를 구현합니다.

jQuery 플러그인 AjaxFileUpload는 ajax 파일 upload_jquery를 구현합니다.

WBOY원래의: 2016-05-16 15:02:182484검색

본 글의 예시는 참고용으로 파일 업로드를 구현하기 위한 AjaxFileUpload의 구체적인 코드를 공유하고 있습니다.

jQuery 플러그인 AjaxFileUpload는 ajax 파일 업로드를 구현하는 데 사용됩니다. 플러그인은 사용이 매우 간단합니다. 다음으로 AjaxFileUpload 플러그인을 사용하여 파일 업로드를 구현하는 방법을 보여주는 데모를 작성하겠습니다.

1. AjaxFileUpload 플러그인 관련 js 소개

코드 복사 코드는 다음과 같습니다.

0a5088be1321d0ddeabfa4e2dc4f7e1dresources/js/jquery-1.2.1.js">2cacc6d41bbb37262a98f745aa00fbf0

d2a06dc021fd8be3cb33ff0c5644612dresources/js/ajaxfileupload.js">2cacc6d41bbb37262a98f745aa00fbf0

참고: 테스트 결과 ajaxfileupload에는 jQuery 버전에 대한 요구 사항이 있는 것으로 나타났습니다. ajaxfileupload 및 jQuery에 해당하는 js 버전은 일관성이 있어야 합니다. 그렇지 않으면 버전 충돌을 피하기 위해 ajaxfileupload 공식 웹사이트에서 다운로드할 수 있습니다.

2. 업로드 기능 코드 구현

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/base.jsp" %>
<%
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>ajax文件上传</title>
  
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <meta http-equiv="expires" content="0">  
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <link rel="stylesheet" type="text/css" href="validate/ajaxfileupload.css" />
  <script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script>
  <script type="text/javascript" src="validate/ajaxfileupload.js" ></script>
  <script type="text/javascript">
  $(function(){
    //上传图片
    $("#btnUpload").click(function() {
        alert(ajaxFileUpload());
    });
  });
  function ajaxFileUpload() {
    // 开始上传文件时显示一个图片
    $("#wait_loading").ajaxStart(function() {
      $(this).show();
    // 文件上传完成将图片隐藏起来
    }).ajaxComplete(function() {
      $(this).hide();
    });
    var elementIds=["flag"]; //flag为id、name属性名
    $.ajaxFileUpload({
      url: 'uploadAjax.htm', 
      type: 'post',
      secureuri: false, //一般设置为false
      fileElementId: 'file', // 上传文件的id、name属性名
      dataType: 'text', //返回值类型，一般设置为json、application/json
      elementIds: elementIds, //传递参数到服务器
      success: function(data, status){ 
        alert(data);
      },
      error: function(data, status, e){ 
        alert(e);
      }
    });
    //return false;
  }
  </script>
 </head>
 
 <body>
  <div id="wait_loading" style="padding: 50px 0 0 0;display:none;">
    <div style="width: 103px;margin: 0 auto;"><img src="<%=path %>/images/loading.gif"/></div>
    <br></br>
    <div style="width: 103px;margin: 0 auto;"><span>请稍等...</span></div>
    <br></br>
  </div>
  <input type="file" id="file" name="file"><br/>
  <input type="hidden" id="flag" name="flag" value="ajax文件上传"/>
  <input type="button" id="btnUpload" value="上传图片" />
 </body>
</html>

위 내용은 이 글의 전체 내용입니다. jquery 프로그래밍을 배우는 모든 분들께 도움이 되기를 바랍니다.

성명：

이전 기사：Heap Sort 힙 정렬 알고리즘 및 JavaScript 코드 구현에 대한 자세한 그래픽 설명_기본 지식다음 기사：Heap Sort 힙 정렬 알고리즘 및 JavaScript 코드 구현에 대한 자세한 그래픽 설명_기본 지식

jQuery 플러그인 AjaxFileUpload는 ajax 파일 upload_jquery를 구현합니다.

관련 기사