[Resolvido] Algúem que manja em JavaScript

Dexter Morgan · Setembro 3, 2012

Bom dia, olha já vou ao ponto em relação a JavaScript sou leigo, e infelizmente muitas vezes precisamos usar, então seguinte, vocês ja devem ter visto esse script de multi seleção de imagem:

/**************************************************************************************************/
               /* MULTIFILE */
/**************************************************************************************************/

;if(window.jQuery)(function($){
$.fn.MultiFile = function(options){
if(this.length==0) return this;
if(typeof arguments[0]=='string'){
if(this.length>1){
var args = arguments;
return this.each(function(){
$.fn.MultiFile.apply($(this), args);
});
};
$.fn.MultiFile[arguments[0]].apply(this, $.makeArray(arguments).slice(1) || []);
return this;
};
var options = $.extend(
{},
$.fn.MultiFile.options,
options || {}
);
$('form')
.not('MultiFile-intercepted')
.addClass('MultiFile-intercepted')
.submit($.fn.MultiFile.disableEmpty);
if($.fn.MultiFile.options.autoIntercept){
$.fn.MultiFile.intercept( $.fn.MultiFile.options.autoIntercept);
$.fn.MultiFile.options.autoIntercept = null;
};
this
.not('.MultiFile-applied')
.addClass('MultiFile-applied')
.each(function(){
window.MultiFile = (window.MultiFile || 0) + 1;
var group_count = window.MultiFile;
var MultiFile = {e:this, E:$(this), clone:$(this).clone()};
if(typeof options=='number') options = {max:options};
var o = $.extend({},
$.fn.MultiFile.options,
options || {},
($.metadata? MultiFile.E.metadata(): ($.meta?MultiFile.E.data():null)) || {},
{}
);
if(!(o.max>0)){
o.max = MultiFile.E.attr('maxlength');
if(!(o.max>0)){
o.max = (String(MultiFile.e.className.match(/\b(max|limit)\-([0-9]+)\b/gi) || ['']).match(/[0-9]+/gi) || [''])[0];
if(!(o.max>0)) o.max = -1;
else o.max = String(o.max).match(/[0-9]+/gi)[0];
}
};
o.max = new Number(o.max);
o.accept = o.accept || MultiFile.E.attr('accept') || '';
if(!o.accept){
o.accept = (MultiFile.e.className.match(/\b(accept\-[\w\|]+)\b/gi)) || '';
o.accept = new String(o.accept).replace(/^(accept|ext)\-/i,'');
};
$.extend(MultiFile, o || {});
MultiFile.STRING = $.extend({},$.fn.MultiFile.options.STRING,MultiFile.STRING);
$.extend(MultiFile, {
n: 0,
slaves: [], files: [],
instanceKey: MultiFile.e.id || 'MultiFile'+String(group_count),
generateID: function(z){ return MultiFile.instanceKey + (z>0 ?'_F'+String(z):''); },
trigger: function(event, element){
var handler = MultiFile[event], value = $(element).attr('value');
if(handler){
var returnValue = handler(element, value, MultiFile);
if( returnValue!=null ) return returnValue;
}
return true;
}
});
if(String(MultiFile.accept).length>1){
MultiFile.accept = MultiFile.accept.replace(/\W+/g,'|').replace(/^\W|\W$/g,'');
MultiFile.rxAccept = new RegExp('\\.('+(MultiFile.accept?MultiFile.accept:'')+')$','gi');
};
MultiFile.wrapID = MultiFile.instanceKey+'_wrap';
MultiFile.E.wrap('<div class="MultiFile-wrap" id="'+MultiFile.wrapID+'"></div>');
MultiFile.wrapper = $('#'+MultiFile.wrapID+'');
MultiFile.e.name = MultiFile.e.name || 'file'+ group_count +'[]';
if(!MultiFile.list){
MultiFile.wrapper.append( '<div class="MultiFile-list" id="'+MultiFile.wrapID+'_list"></div>' );
MultiFile.list = $('#'+MultiFile.wrapID+'_list');
};
MultiFile.list = $(MultiFile.list);
MultiFile.addSlave = function( slave, slave_count ){
MultiFile.n++;
slave.MultiFile = MultiFile;
if(slave_count>0) slave.id = slave.name = '';
if(slave_count>0) slave.id = MultiFile.generateID(slave_count);
slave.name = String(MultiFile.namePattern
.replace(/\$name/gi,$(MultiFile.clone).attr('name'))
.replace(/\$id/gi,  $(MultiFile.clone).attr('id'))
.replace(/\$g/gi,group_count)
.replace(/\$i/gi,slave_count)
);
if((MultiFile.max > 0) && ((MultiFile.n-1) > (MultiFile.max)))
slave.disabled = true;
MultiFile.current = MultiFile.slaves[slave_count] = slave;
slave = $(slave);
slave.val('').attr('value','')[0].value = '';
slave.addClass('MultiFile-applied');
slave.change(function(){
$(this).blur();
if(!MultiFile.trigger('onFileSelect', this, MultiFile)) return false;
var ERROR = '', v = String(this.value || '');
if(MultiFile.accept && v && !v.match(MultiFile.rxAccept))
ERROR = MultiFile.STRING.denied.replace('$ext', String(v.match(/\.\w{1,4}$/gi)));
for(var f in MultiFile.slaves)
if(MultiFile.slaves[f] && MultiFile.slaves[f]!=this)
if(MultiFile.slaves[f].value==v)//{
ERROR = MultiFile.STRING.duplicate.replace('$file', v.match(/[^\/\\]+$/gi));
var newEle = $(MultiFile.clone).clone();
newEle.addClass('MultiFile');
if(ERROR!=''){
MultiFile.error(ERROR);
MultiFile.n--;
MultiFile.addSlave(newEle[0], slave_count);
slave.parent().prepend(newEle);
slave.remove();
return false;
};
$(this).css({ position:'absolute', top: '-3000px' });
slave.after(newEle);
MultiFile.addToList( this, slave_count );
MultiFile.addSlave( newEle[0], slave_count+1 );
if(!MultiFile.trigger('afterFileSelect', this, MultiFile)) return false;
});
$(slave).data('MultiFile', MultiFile);
};
MultiFile.addToList = function( slave, slave_count ){
if(!MultiFile.trigger('onFileAppend', slave, MultiFile)) return false;
var
r = $('<div class="MultiFile-label"></div>'),
v = String(slave.value || ''),
a = $('<span class="MultiFile-title" title="'+MultiFile.STRING.selected.replace('$file', v)+'">'+MultiFile.STRING.file.replace('$file', v.match(/[^\/\\]+$/gi)[0])+'</span>'),
b = $('<a class="MultiFile-remove" href="#'+MultiFile.wrapID+'">'+MultiFile.STRING.remove+'</a>');
MultiFile.list.append(
r.append(b, ' ', a)
);
b
.click(function(){
if(!MultiFile.trigger('onFileRemove', slave, MultiFile)) return false;
MultiFile.n--;
MultiFile.current.disabled = false;
MultiFile.slaves[slave_count] = null;
$(slave).remove();
$(this).parent().remove();
$(MultiFile.current).css({ position:'', top: '' });
$(MultiFile.current).reset().val('').attr('value', '')[0].value = '';
if(!MultiFile.trigger('afterFileRemove', slave, MultiFile)) return false;
return false;
});
if(!MultiFile.trigger('afterFileAppend', slave, MultiFile)) return false;
};
if(!MultiFile.MultiFile) MultiFile.addSlave(MultiFile.e, 0);
MultiFile.n++;
MultiFile.E.data('MultiFile', MultiFile);});
};
$.extend($.fn.MultiFile,{
reset: function(){
var settings = $(this).data('MultiFile');
if(settings) settings.list.find('a.MultiFile-remove').click();
return $(this);},
disableEmpty: function(klass){ klass = (typeof(klass)=='string'?klass:'')||'mfD';
var o = [];
$('input:file.MultiFile').each(function(){ if($(this).val()=='') o[o.length] = this; });
return $(o).each(function(){ this.disabled = true }).addClass(klass);},
reEnableEmpty: function(klass){ klass = (typeof(klass)=='string'?klass:'')||'mfD';
return $('input:file.'+klass).removeClass(klass).each(function(){ this.disabled = false });},
intercepted: {},
intercept: function(methods, context, args){
var method, value; args = args || [];
if(args.constructor.toString().indexOf("Array")<0) args = [ args ];
if(typeof(methods)=='function'){
$.fn.MultiFile.disableEmpty();
value = methods.apply(context || window, args);
setTimeout(function(){ $.fn.MultiFile.reEnableEmpty() },1000);
return value;
};
if(methods.constructor.toString().indexOf("Array")<0) methods = [methods];
for(var i=0;i<methods.length;i++){
method = methods[i]+'';
if(method) (function(method){
$.fn.MultiFile.intercepted[method] = $.fn[method] || function(){};
$.fn[method] = function(){
$.fn.MultiFile.disableEmpty();
value = $.fn.MultiFile.intercepted[method].apply(this, arguments);
setTimeout(function(){ $.fn.MultiFile.reEnableEmpty() },1000);
return value;
};
})(method);
};
}});
$.fn.MultiFile.options ={
accept: '',
max: -1,
namePattern: '$name',
STRING:{
remove:'x',
denied:'Voce nao pode Selecionar um Arquivo $ext file.\nTente novamente...',
file:'$file',
selected:'Arquivo Selecionado: $file',
duplicate:'Este Arquivo ja foi Selecionado:\n$file' },
autoIntercept: [ 'submit', 'ajaxSubmit', 'ajaxForm', 'validate', 'valid' ],
error: function(s){
alert(s);
}
};
$.fn.reset = function(){return this.each(function(){try{ this.reset();}catch(e){}});};
$(function(){
$("input[type=file].multi").MultiFile();
});
})(jQuery);

com ele pode selecionar varias imagens no mesmo input mas tem que ficar clicando no input, ai achei um código, ja em html 5 em que faz a mesma coisa, só que pode selecionar varios de uma vez:

function handleFileSelect(evt){
var files = evt.target.files;
var output = [];
for(var i = 0, f; f = files[i]; i++){
output.push('<li><strong>', escape(f.name), '</strong>', '</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('img').addEventListener('change', handleFileSelect, false);

ele é até bem menor, mas ele nao tem opção de excluir a imagem se selecionei errada e tals, queria saber se tem como, implantar as duas em uma só, desse jeito códito de muli ficará mais completo... aqui está o link de onde extrai o código acima: http://www.html5rocks.com/pt/tutorials/file/dndfiles/

resumindo, quero que o 1° código faça o que o segundo faz, seleciona varios de uma só vez e nao ter que ficar clicando um a um, para selecionar ...

Ted k' · Setembro 3, 2012

Já viu esse aqui:

http://blueimp.github.com/jQuery-File-Upload/

Dexter Morgan · Setembro 5, 2012

Ted k' achei legal esse aí, mas consegui ajustar com html 5 mesmo, ficou bem melhor agora ... RESOLVIDO :thumbsup:

Entrar

Arquivado

[Resolvido] Algúem que manja em JavaScript

Recommended Posts

Dexter Morgan 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dexter Morgan 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante