Buenas tengo un sistema de noticias que esta basado en PHP y Jquery, uso el ajaxupload, para subir imagenes pero mi consulta es la siguiente:
¿Como se puede insertar las imagenes que se sube en el servidor?
y a la vez se añada en el campo Textarea ( <textarea id="datos" name="datos" class="text-input"></textarea>) como se usa en blogger y wordpress, cuando suben imagenes y cuando los marcas se añade en la noticia que deseas publicar.
Este son las imagenes que se suben y cargan mediante ajax
Código HTML:
<ol id="files">
<li><img src="/imagen/4845.jpg" width="100"><br>
<a href="#" class="del">remove</a></li>
<li><img src="/imagen/4890.jpg" width="100"><br>
<a href="#" class="del">remove</a></li>
</ol>
Y este es el Codigo que uso y se inserta en un Input, pero kisiera que se inserte en el textarea con varias imagenes que subo, ya que en la linea
<ol id="files"></ol></div> se ve la cantidad de imagenes que se sube como lo mencione mas arriba
Código Javascript
:
Ver original<script src="js/ajaxupload.js" type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function(){
/* Example 2 */
var count = $('#files').children('li').size();
new AjaxUpload('upload_button', {
action: 'upload.php',
data : {
'key1' : "This data won't",
'key2' : "be send because",
'key3' : "we will overwrite it"
},
onSubmit : function(file , ext){
// Allow only images. You should add security check on the server-side.
if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
/* Setting data */
this.setData({
'key': 'This string will be send with the file'
});
$('#example2 .text').text('Uploading ' + file);
} else {
// extension is not allowed
$('#example2 .text').text('Error: only images are allowed');
// cancel upload
return false;
}
// increment count
count ++;
// count submission
if(count > 12){
alert('Blah blah');
return false;
}
// showing loader
var li = $('#files').children('li').size();
if(count > li ){
$('#loader').show();
}
},
onComplete: function(file, response){
$('#example2 .text').text('Uploaded ' + file);
var list_item = '<li><img src="/imagen/'+ file +'" width="100"/><br />';
list_item += '<a href="#" class="del">remove</a></li>';
$('#files').append(list_item);
$('#imagen').val(file);
// remove the loader
var li = $('#files').children('li').size();
if(count == li){
$('#loader').hide();
}
$('.del').click(function(e){
e.preventDefault();
$.post("delete.php");
$(this).parent().remove();
count --;
});
}
});
});/*]]>*/</script>
<ol id="files"></ol></div>
<form id="registro" name="registro" action="">
<div>
<label class="campo">Imagen :</label>
<input type="text" id="imagen" name="imagen" class="text-input" disabled="disabled">
<li id="example2" class="example"><a href="#" id="upload_button">Upload</a>
<img id="loader" src="img/loader.gif" style="display:none" /></li>
</div>
<div>
<label class="campo">Datos</label>
<textarea id="datos" name="datos" class="text-input"></textarea>
</div>
<div align="center">
<input type="submit" class="submit" value="Enviar" />
<input type="button" class="button" onclick="preview_ajax()" value="Vista Previa" />
</div>
</form>