jQuery jForm ajax 单击选中文件直接自动上载 无需提交按钮
2016-06-06 14:40
465 查看
利用 jQuery 插件 jform 实现文件选中直接上载,无需点提交按钮,完整实例如下:
以下是基于 Google Chrome 的调试信息:
Q群讨论 236201801
.
<%@ 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 的调试信息:
Q群讨论 236201801
.
相关文章推荐
- js jquery js的DOM与Jquery相互转换,js控制select的方法
- jquery树形菜单效果的简单实例
- jQuery.extend 函数
- jQuery.extend 函数
- jquery.tmpl()解析json文件
- JQuery简介
- 使用jQuery加载js脚本
- 浅谈Jquery中Ajax异步请求中的async参数的作用
- checkbox单选效果以及弹窗的初始化和事件
- jquery
- 使用jquery 的deferred 报错
- jQuery EasyUI使用教程之创建异步树
- JQuery 常用方法基础教程
- jQuery 提交请求并返回结果
- jquery ajax结合thinkphp的getjson实现跨域的方法
- jquery插件方式实现table查询功能的简单实例
- Jquery-zTree的基本用法
- Jquery中的prop()方法 全选或全不选
- Jquery选择器完全总结
- jQuery(四)jQuery事件机制与JavaScript的区别