How to save images (with preview) in CRUD of products

Navigation
-1

What is the best way to work with upload of images of products for example: how to% of images with product X , so that before completing the registration of the product, the user can remove, etc.

And when editing, the user goes there, does all the "exchange-swap" of images and ends up not completing the operation. What better option for a " Fake " image exchange, and when you go back to a new edition, everything is as before?

As an example, linkar or MercadoLivre . You create your ad, add the images .. if you get going and coming back the images are always synchronized.

    
asked by anonymous 15.12.2016 / 17:28

2 answers

1

See the image below for the Relational Database model you need to use.

The strategy would be: When you open the add product form you will already have to create an item in the products table with the status that defines that this product is still in the upload phase. Image insertion must be done via Ajax and the relationship in the table is already added when the image is uploaded.

Product-to-Image Relationship

    
16.12.2016 / 15:06
2

Ideally, you place your code to make life easier for those who want to help you. 

<legend class="leg_img">Insira imagens</legend>
<fieldset id="upload_img" class="nf_class upload_img">
    <input type="file" id="files" name="files[]" multiple accept="image/*" style="display:none;" />
    <a href="#" id="fileSelect" >selecionar</a>
    <div id="list" style="margin-bottom:0;"></div>
</fieldset>

<script type="text/javascript">
var fileSelect = document.getElementById("fileSelect");
var	fileElem = document.getElementById("files");

fileSelect.addEventListener("click", function(e)
{
	fileSelect.style.cssFloat = "right";
	fileSelect.style.marginRight = "3px";
	fileSelect.style.marginTop = "-3px";
	if(fileElem)
	{
		fileElem.click();
	}
	e.preventDefault();
}, false);

function handleFileSelect(evt)
{
	var	list = document.getElementById("list").childElementCount;
	var files = evt.target.files;
    var qtde = files.length;
    var nomes = fileElem.files;
    var nome;
    	
    if(qtde > 3 || list > 2)
    {
    	alert('apenas 3');
    	document.getElementById('files').value = ""; 
    	return;
    }else
    {
    	for(var i = 0, f; f = files[i]; i++)
    	{
    		if(!f.type.match('image.*'))
    		{
        		continue;
        	}
        	var reader = new FileReader();
			reader.onload = (function(theFile)
			{
			   	return function(e)
			   	{
		        	var span = document.createElement('span');
		            span.innerHTML = 
	"<a href='#'><img style='float:left;padding: 3px;height: 33px; width: 33px; border: 1px solid #c7c7c7;margin-top: 0px;' src='" + e.target.result + "'" + "title='" + escape(theFile.name) + "'/><img class='icon-del-img' style='float:left;margin-left:-41px;' src='img/icon-del-img.svg'/></a>";
		            document.getElementById('list').insertBefore(span, null);
		            span.children[0].addEventListener("click", function(evt)
		            {
	                	span.parentNode.removeChild(span);
	                });
		        };
		    })(f);
        	reader.readAsDataURL(f);
        } 
        return true;}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
    
15.12.2016 / 19:21
Write in files without deleting your content Array problem in Java