我是靠谱客的博主 整齐百合,最近开发中收集的这篇文章主要介绍Jquery.ocupload一键上传OCUpload引入JS简单使用页面回显问题,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

Jquery.ocupload一键上传使用

  • OCUpload
  • 引入JS
  • 简单使用
  • 页面回显问题

OCUpload

OCUpload为jQuery的插件(One Click Upload),实现了页面文件异步上传。
使用一键上传,必须先引入Jquery。

引入JS

<script src="../js/jquery-validation-1.14.0/lib/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.ocupload-1.1.2.js"></script>

下载地址:https://pan.baidu.com/s/1IYg2PORFyG_cx0yJCT6PTg 提取码:wkh9

简单使用

(1)html

 <a id="uploadFile">上传</a>

(2)JavaScript

    //调用OCUpload插件的方法
    $("#uploadFile").upload({
    	action: basePath + "/upload/file", //提交的地址
    	name: "file", //上传组件的name属性,即<input type='file' name='file'/> 
    	enctype: 'multipart/form-data', //mime类型,默认即可
    	params: {}, //请求时额外传递的参数,默认为空
    	autoSubmit: true, //是否自动提交,即当选择了文件,自动关闭了选择窗口后,是否自动提交请求。
    	onSubmit: function() {}, //提交表单之前触发事件
    	onComplete: function(data) { //提交表单之后
    	},
    	onSelect: function() { //当用户选择了一个文件后触发事件
    		//当选择了文件后,关闭自动提交
    		this.autoSubmit = false;
    		//校验上传的文件名是否满足后缀为.xls或.xlsx
    		var regex = /^.*.(?:png|jpg)$/i;
    		//this.filename()返回当前选择的文件名称 (ps:我使用这个方法没好使,自己写了一个获取文件的名的方法) $("[name = '"+this.name()+"']").val())
    		//alert(this.filename());
    		if(regex.test($("[name = '" + this.name() + "']").val())) {
    			//通过校验
    			this.submit();
    		} else {
    			//未通过
    		}
    	}
    });

页面回显问题

服务器响应可使用:Content-Type:text/plain;charset=UTF-8
SpringMVC/SpringBoot 代码参考
在这里插入图片描述

最后

以上就是整齐百合为你收集整理的Jquery.ocupload一键上传OCUpload引入JS简单使用页面回显问题的全部内容,希望文章能够帮你解决Jquery.ocupload一键上传OCUpload引入JS简单使用页面回显问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(44)

评论列表共有 0 条评论

立即
投稿
返回
顶部