我是靠谱客的博主 妩媚心情,最近开发中收集的这篇文章主要介绍ocupload.js+ajax导入excel文件,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

导入代码:

 <a class="btn btn-default" id="importExcel"><i class="fa fa-file-excel-o"></i>&nbsp;导入 Excel 文件(*.xlsx)</a>
$("#importExcel").ocupload({
        name: 'myFile', //上传组件的name属性,即<input type='file' name='file'/>
        url: '',  //向服务器请求的路径
        mimeTypes: '.xlsx', //后缀名,支持多个.xlsx,.xls
        param : {}, //请求时额外传递的参数,默认为空
        success: function(data) {
            //成功操作
        }
    });

 

ocupload.js


(function($){
	$.fn.ocupload = function(options) {
		/** Fix scope problems */
		var self = this;

        /** A unique id so we can find our elements later */
        var id = new Date().getTime().toString().substr(8);
        
		/** Merge the users options with our defaults */
        var defaults = {
            url : "",
            name: 'file',
            mimeTypes: '',
            param : {},
            success : null
        };
        var options = $.extend(defaults, options);
	
		/** Form */
		var form = $(
			'<form '+
			    'id="form'+id+'" '+
				'method="post" '+
				'enctype="multipart/form-data" '+
				'action="'+options.url+'" '+
			'></form>'
		).css({
		    display: 'none'
		});

        /** File Input */
        var input = $(
            '<input '+
                'name="'+options.name+'" '+
                'type="file" '+
            '/>'
        ).css({
            display: 'none'
        });
        
        if (options.mimeTypes) {
            input.attr('accept', options.mimeTypes);
        }
        
		/** Put everything together */
		form.append(input);
		self.after(form);
		
		/** Watch for file selection */
		input.change(function() {
		    /** Judge whether the file is empty */
		    var file = input.val();
		    if (null == file || '' == file) {
		        return;
		    }
			
			/** Submit the form automaticly after selecting the file */
			self.submit();
		});
		
		/** Watch for element click */
		$(self).click(function() {
		    input.click();
		});
		
		/** Methods */
		$.extend(this, {
            /** Submit the form */
            submit: function() {
                var formData = new FormData(form[0]);
                
                /** add additional paramters before sending */
                $.each(options.params, function(key, value) {
                    formData.append(key, value);
                });
                
                /** Submit the actual form */
                dialogLoading(true);
                window.setTimeout(function() {
                    $.ajax({
                        url: options.url,
                        dataType: 'json',
                        type: 'POST',
                        async: false,
                        data: formData,
                        processData : false, // 使数据不做处理
                        contentType : false, // 不要设置Content-Type请求头
                        success: function(data){
                            if (data.code == '500') {
                                dialogAlert(data.msg, 'error');
                            } else if (data.code == '0') {
                                options.success(data);
                                dialogMsg(data.msg, 'success');
                            }
                            //code不等于0,执行自定义的onError
                            if (data.code != '0') {
                                if(options.onError){
                                    options.onError(data);
                                }
                            }
                            
                            /** Reset file */
                            input.val('');
                        },
                        error:function(XMLHttpRequest, textStatus, errorThrown){
                            dialogLoading(false);
                            console.log(textStatus);
                        },
                        beforeSend : function() { //请求前
                            dialogLoading(true);
                        },
                        complete : function() { //请求完成后
                            dialogLoading(false);
                        }
                    });
                }, 500);
                
            }
		});
	}
})(jQuery);

 

最后

以上就是妩媚心情为你收集整理的ocupload.js+ajax导入excel文件的全部内容,希望文章能够帮你解决ocupload.js+ajax导入excel文件所遇到的程序开发问题。

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

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

评论列表共有 0 条评论

立即
投稿
返回
顶部