jQuery jForm ajax 单击选中文件直接自动上载无需提交按钮

最新推荐文章于 2024-07-21 03:01:07 发布

___NULL

最新推荐文章于 2024-07-21 03:01:07 发布

阅读量3.5k

点赞数

分类专栏：所有 Web前端文章标签： jform jquery 文件上载 upload

本文链接：https://blog.csdn.net/joyous/article/details/51595344

版权

所有同时被 2 个专栏收录

219 篇文章 2 订阅

订阅专栏

Web前端

69 篇文章 0 订阅

订阅专栏

利用 jQuery 插件 jform 实现文件选中直接上载，无需点提交按钮，完整实例如下：

插件来自 https://github.com/malsup/form/

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="scripts/jquery/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery/jform/jquery.form.js"></script>
<title>jForm Demo</title>
</head>
<body>
	<div id="ClickMe" style="cursor: pointer; width: 100px; height: 25px; background-color: #00ff00; border-radius: 5px;">Click Me!</div>
	<form id="formUpload" name="formUploadFile" method="POST" enctype="multipart/form-data">
		<input id="fileUpload" type="file" name="upload" style="display: none" />
	</form>
</body>
<script type="text/javascript">
  // form 内的文件选择内容被改变则立即提交
  $('#fileUpload').on('change', function()
  {
    // 当 file 框内容改变则提交 form
    $('#formUpload').submit();
    console.log('formUpload to submit');
  });

  // 定义的热点被单击则打开文件选择框
  $('#ClickMe').on('click', function()
  {
    UploadFileOnSelect();
    console.log('object on click');
  });

  // 选需要上载的图片 上载完毕清除 form
  function UploadFileOnSelect()
  {
    // 打开文件选择框
    console.log('select file');
    var input = document.getElementById("fileUpload");
    input.click();
    // 提交完毕后初始化 form
    $('#formUpload').resetForm();
    console.log('selected file ' + input.value);
  }

  // jquery.form upload
  $('#formUpload').ajaxForm({
    // 设置返回格式
    dataType : 'json',
    // 接收文件的 struts2 action 或者是 servlet 路径
    url : '/struts/uploadMultfile',
    success : function(data)
    {
      // 返回成功信息
      console.log('success: ' + data);
    },
    uploadProgress : function(event, position, total, percentComplete)
    {
      // 实时进度
      console.log('uploadProgress: ', percentComplete + '%', position, 'max:', total);
    },
    error : function(data)
    {
      // 返回错误信息
      console.log('error: ' + data);
    }
  });
</script>
</html>

以下是基于 Google Chrome 的调试信息：