Skip to main content
etiquetas editadas
Enlace
Origen Enlace

Problema input file Ajax-Upload carga 2 veces

Tengo el siguiente problema estoy cargando archivos con la Libreria Ajax-Upload , pero cuando cargo el archivo este se vuelve a levantar , el archivo se guarda en mi servidor, pero la ventana vuelve a levantarse ¿A que se puede deber este problema ? En el jsfiddle coloque de forma manual el script debido a que no encontre el CDN saludos gracias estaré atento a sus respuestas

/*! Ajax-Upload - v2.0.2 - 2016-02-18 - Uses native XHR to upload files.
* https://github.com/codler/jQuery-Ajax-Upload
* Copyright (c) Han Lin Yap http://yap.nu; MIT license
* == Example Usage ==
* $.ajaxUpload({
*   url: 'upload.php',
*   data: ':file',
*   success: function (data, status, xhr) {
*       console.log(data);
*   }
* });
*/
/* --- Other polyfills --- */
//no encontre el cdn de ajax uplaod por eso pongo el codigo de forma man
// Avoid `console` errors in browsers that lack a console.
(function() {
    var noop = function () {};
    var console = (window.console = window.console || {});
    
    if (!console.log) {
        console.log = noop;
    }
}());

/* --- Ajax Upload --- */
(function ($) {
    'use strict';

    // Prevent to read twice
    if ($.ajaxUpload) {
        return;
    }

    $.ajaxUploadSettings = {
        //onloadstart   : function(e){},
        onprogress  : function(e){ console.log('Ajax Upload progress'); },
        onabort     : function(e){ console.log('Ajax Upload abort'); },
        onerror     : function(e){ console.log('Ajax Upload error'); console.log(e); },
        onload      : function(e){ console.log('Ajax Upload load'); },
        //ontimeout     : function(e){},
        //onloadend     : function(e){},
        name        : 'uploads[]'
    };

    $.ajaxUploadSerializeFiles = function( element ) {
        var data = [];
        var name = $(element).attr('name');
        for(var i = 0, len = element.files.length; i < len; i++) {
            data.push({
                'name' : name, 
                'value': element.files[i]
            });
        }
        return data;
    };

    /**
     * @param array kv [{name, value},..]
     * @param FormData exist Existing FormData
     */
    $.ajaxUploadToFormData = function( kv, exist ) {
        var fd = exist || new FormData();
        for(var i = 0, len = kv.length; i < len; i++) {
            fd.append(kv[i].name, kv[i].value);
        }
        return fd;
    };

    $.ajaxUploadExtractData = function( data, exist ) {
        if ( !data/* || $.isArray(data)*/ || data instanceof FormData ) return data;
        var fd = $.ajaxUploadExtractData(exist) || new FormData();
        if ( typeof data === "string" || data instanceof jQuery ) {
            var kv = [];
            $(data).each(function (index, element) {
                $.merge( kv, $.ajaxUploadSerializeFiles(this) );
            });
            data = kv;
        } else if (data instanceof FileList) {
            var kv = [];
            for(var i = 0, len = data.length; i < len; i++) {
                kv.push({
                    'name' : $.ajaxUploadSettings.name, 
                    'value': data[i]
                });
            }
            data = kv;
        } else if (typeof data === "object" && !$.isArray(data)) {
            var temp = [];
            for(name in data) {
                temp.push({
                    'name': name,
                    'value': data[name]
                });
            }
            data = temp;
        }
        return $.ajaxUploadToFormData(data, fd);
    };

    /**
     * All available options as $.ajax() except
     * contentType
     * processData
     * type
     */
    $.ajaxUpload = function(origSettings) {

        // Merge Global settings
        var s = jQuery.extend(true, {}, $.ajaxUploadSettings, origSettings);

        // Normalize data
        var fd = $.ajaxUploadExtractData(s.data);
        //fd = $.ajaxUploadToFormData(fd);
        // Set nessessery settings
        s.data = null;
        var nesseserySettings = {
            processData : false,
            type: 'POST',
            beforeSend : function(xhr, s) {
                s.xhr = function () {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.onprogress = s.onprogress.bind(this);
                    xhr.upload.onabort = s.onabort.bind(this);
                    xhr.upload.onerror = s.onerror.bind(this);
                    xhr.upload.onload = s.onload.bind(this);
                    return xhr;
                };
                s.data = fd;
                if (origSettings.beforeSend) {
                    return origSettings.beforeSend.call(this, xhr, s);
                }
            }
        };
        s = jQuery.extend(true, {}, s, nesseserySettings);
        // make sure dont overwrites multipart
        if (s.contentType) {
            delete s.contentType;
        }
        // Upload
        return $.ajax(s);
    };

    $.fn.ajaxUpload = function( origSettings ) {
        return this.each(function() {
            var options = jQuery.extend(true, {}, origSettings);
            var data = $(this).serializeArray();

            $('input:file', this).each(function (index, element) {
                $.merge( data, $.ajaxUploadSerializeFiles(this) );
            });
            
            options.data = $.ajaxUploadExtractData(data, options.data);
            
            $.ajaxUpload(options);
        });
    };

    $.ajaxUploadPost = function( url, data, callback, type ) {
        // shift arguments if data argument was omited
        if ( jQuery.isFunction( data ) ) {
            type = type || callback;
            callback = data;
            data = {};
        }

        return $.ajaxUpload({
            type: "POST",
            url: url,
            data: data,
            success: callback,
            dataType: type
        });
    };

    $.ajaxUploadPrompt = function( options ) {
        var def = $.Deferred();
        var nesseserySettings = {
            success : function () {
                if (options.success) {
                    options.success.apply(this, arguments);
                }
                form.remove();
            }
        };

        var s = jQuery.extend(true, {}, options, nesseserySettings);
        var id = 'ajaxupload' + Date.now();
        var form = $('<form method="post" enctype="multipart/form-data" />').appendTo('body');
        form.attr('action', s.url);
        form.attr('target', id);

        form.css({
            position: 'relative',
            top: -1000,
            left: -1000,
            opacity: 0
        });
        form.submit(function () { //alert($(':file', this).val()); 
        });
                
        var d = $('<input type="file" />').appendTo(form);
        d.attr('name', $.ajaxUploadSettings.name);

        if (options.accept) {
            d.attr('accept', options.accept);
        }

        if (options.multiple) {
            d.attr('multiple', 'multiple');
        }

        d.change(function() {
            if (!this.files.length) {
                return false;
            }

            if (!s.data) {
                s.data = {};
            }

            s.files = this.files;
            s.data = $.ajaxUploadExtractData(s.data, $.ajaxUploadSerializeFiles(this));

            $.ajaxUpload(s).promise(def);
        });
        d.click();
        
        return def;
    };
    
    // bind a click event
    $.fn.ajaxUploadPrompt = function( origSettings ) {
        return this.click(function () {
            $(this).trigger('ajaxUploadPrompt', $.ajaxUploadPrompt( origSettings ));
        });
    };

    // bind a drop event
    $.fn.ajaxUploadDrop = function( origSettings ) {
        return this.each(function() {
            var $this = $(this);

            $this.on('dragenter.ajaxUpload', function(e) {
                e.stopPropagation(); e.preventDefault();

                $this.addClass('dragover');
                
            }).on('dragover.ajaxUpload', function(e) {
                e.stopPropagation(); e.preventDefault();
                
                $this.addClass('dragover');

            }).on('dragleave.ajaxUpload', function(e) {
                $this.removeClass('dragover');

            }).on('drop.ajaxUpload', function(e) {
                e.stopPropagation(); e.preventDefault();

                var dt = e.originalEvent.dataTransfer;  
                var files = dt.files;                           
                var options = jQuery.extend(true, {}, origSettings);
                
                options.data = $.ajaxUploadExtractData(files, options.data);
                options.files = files;  
                
                $this.trigger('ajaxUploadDrop', $.ajaxUpload(options));

                $this.removeClass('dragover');
            });
        });
    };
})(jQuery);




//asigno ajax upload al input
$(function(){

  $.ajaxUploadSettings.name = 'file';
  // Set promptzone
  $('#promptzone').ajaxUploadPrompt({
  url: '<?php print base_url();?>urlejemplo',
  success : function (data) {

  }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <label for="promptzone">Adjuntar Archivo</label>
  <input type="file" class="form-control-file" id="promptzone">
</div>