zoukankan      html  css  js  c++  java
  • 上传文件校验格式

    <script type="text/javascript">
    function fileChange(target) {
    var name=target.value;
    var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
    if(fileName !=="doc" && fileName !=="docx" && fileName !== 'xlsx' && fileName !== 'xls' && fileName !== 'jpg' && fileName !=='png'){
    toastr.error("请选择doc/docx/xlsx/xls等格式的文件");
    target.value="";
    return false;   //阻止submit提交
    }
    }
    (function($) {
    $.fn.ajaxfileupload = function(options) {
    var settings = {
    params: {},
    action: '',
    onStart: function() { },
    onComplete: function(response) { },
    onCancel: function() { },
    validate_extensions : true,
    valid_extensions : ['doc','docx','xlsx','xls','jpg','png'],
    submit_button : null
    };

    var uploading_file = false;

    if ( options ) {
    $.extend( settings, options );
    }


    // 'this' is a jQuery collection of one or more (hopefully)
    // file elements, but doesn't check for this yet
    return this.each(function() {
    var $element = $(this);

    // Skip elements that are already setup. May replace this
    // with uninit() later, to allow updating that settings
    if($element.data('ajaxUploader-setup') === true) return;

    $element.change(function()
    {
    // since a new image was selected, reset the marker
    uploading_file = false;

    // only update the file from here if we haven't assigned a submit button
    if (settings.submit_button == null)
    {
    upload_file();
    }
    });

    if (settings.submit_button == null)
    {
    // do nothing
    } else
    {
    settings.submit_button.click(function(e)
    {
    // Prevent non-AJAXy submit
    e.preventDefault();

    // only attempt to upload file if we're not uploading
    if (!uploading_file)
    {
    upload_file();
    }
    });
    }

    var upload_file = function()
    {
    if($element.val() == '') return settings.onCancel.apply($element, [settings.params]);

    // make sure extension is valid
    var ext = $element.val().split('.').pop().toLowerCase();
    if(true === settings.validate_extensions && $.inArray(ext, settings.valid_extensions) == -1)
    {
    // Pass back to the user
    settings.onComplete.apply($element, [{status: false, message: 'The select file type is invalid. File must be ' + settings.valid_extensions.join(', ') + '.'}, settings.params]);
    } else
    {
    uploading_file = true;

    // Creates the form, extra inputs and iframe used to
    // submit / upload the file
    wrapElement($element);

    // Call user-supplied (or default) onStart(), setting
    // it's this context to the file DOM element
    var ret = settings.onStart.apply($element, [settings.params]);

    // let onStart have the option to cancel the upload
    if(ret !== false)
    {
    $element.parent('form').submit(function(e) { e.stopPropagation(); }).submit();
    } else {
    uploading_file = false;
    }
    }
    };

    // Mark this element as setup
    $element.data('ajaxUploader-setup', true);

    /*
    // Internal handler that tries to parse the response
    // and clean up after ourselves.
    */
    var handleResponse = function(loadedFrame, element) {
    var response, responseStr = $(loadedFrame).contents().text();
    try {
    //response = $.parseJSON($.trim(responseStr));
    response = JSON.parse(responseStr);
    } catch(e) {
    response = responseStr;
    }

    // Tear-down the wrapper form
    element.siblings().remove();
    element.unwrap();

    uploading_file = false;

    // Pass back to the user
    settings.onComplete.apply(element, [response, settings.params]);
    };

    /*
    // Wraps element in a <form> tag, and inserts hidden inputs for each
    // key:value pair in settings.params so they can be sent along with
    // the upload. Then, creates an iframe that the whole thing is
    // uploaded through.
    */
    var wrapElement = function(element) {
    // Create an iframe to submit through, using a semi-unique ID
    var frame_id = 'ajaxUploader-iframe-' + Math.round(new Date().getTime() / 1000)
    $('body').after('<iframe width="0" height="0" style="display:none;" name="'+frame_id+'" id="'+frame_id+'"/>');
    $('#'+frame_id).get(0).onload = function() {
    handleResponse(this, element);
    };

    // Wrap it in a form
    element.wrap(function() {
    return '<form action="' + settings.action + '" method="POST" enctype="multipart/form-data" target="'+frame_id+'" />'
    })
    // Insert <input type='hidden'>'s for each param
    .before(function() {
    var key, html = '';
    for(key in settings.params) {
    var paramVal = settings.params[key];
    if (typeof paramVal === 'function') {
    paramVal = paramVal();
    }
    html += '<input type="hidden" name="' + key + '" value="' + paramVal + '" />';
    }
    return html;
    });
    }
    });
    }
    })( jQuery )
    $('#analysisLogFile').ajaxfileupload({
    action: '/upload_log_object',
    valid_extensions : ['doc','docx','xlsx','xls','jpg','png'],
    params: {
    extra: 'info'
    },
    onComplete: function(response) {
    $("#analysisLogFilePath").attr("value",response.filePath);
    },
    onStart: function() {
    return true; // cancels upload
    },
    onCancel: function() {
    console.log('no file selected');
    }
    });

    </script>
  • 相关阅读:
    SQL计算生日所属的星座 XuZhao
    IIS 操作系统 .net FrameWork 的一些常见问题
    Python面向对象4.实例属性、实例方法
    Python面向对象6.init方法
    Python面向对象3.定义类、创建对象
    源码部署zabbix4.0监控
    IE6 Select控件挡住DIV内容解决办法
    转自网上的c#日期大全
    已更新或者删除的行值不能使该行成为唯一行(sql2005) 解决办法
    asp 多行多列加分页代码
  • 原文地址:https://www.cnblogs.com/michaelcnblogs/p/12402013.html
Copyright © 2011-2022 走看看