Drad and drop et file reader [Résolu]

ghaziguesmi 5 Messages postés lundi 24 novembre 2008Date d'inscription 28 mars 2013 Dernière intervention - 27 mars 2013 à 17:02 - Dernière réponse : ghaziguesmi 5 Messages postés lundi 24 novembre 2008Date d'inscription 28 mars 2013 Dernière intervention
- 28 mars 2013 à 09:04
BONJOUR
j'ai trouvé ce code pour file reader
Est-ce que je peux appliquée drag and drop pour mettre ds un autre DIV ?
problème ID ????

Merci

<!DOCTYPE html>
<html>
<head>
    <title>File API - FileReader as Data URL</title>
    <style>
body{
    font-family: 'Segoe UI';
    font-size: 12pt;
}

header h1{
    font-size:12pt;
    color: #fff;
    background-color: #1BA1E2;
    padding: 20px;

}
article
{
    width: 80%;
    margin:auto;
    margin-top:10px;
}


.thumbnail{

    height: 100px;
    margin: 10px;    
}
</style>
</head>

    <header>
        File API - FileReader

    </header>
    <script>
window.onload = function(){
        
    //Check File API support
    if(window.File && window.FileList && window.FileReader)
    {
        var filesInput = document.getElementById("files");
        
        filesInput.addEventListener("change", function(event){
            
            var files = event.target.files; //FileList object
            var output = document.getElementById("result");
            
            for(var i = 0; i< files.length; i++)
            {
                var file = files[i];
                
                //Only pics
                if(!file.type.match('image'))
                  continue;
                
                var picReader = new FileReader();
                
                picReader.addEventListener("load",function(event){
                    
                    var picFile = event.target;
                    
                    var div = document.createElement("div");
                  
                    div.innerHTML =  "";
                    
                    output.insertBefore(div,null);            
                
                });
                
                 //Read the image
                picReader.readAsDataURL(file);
            }                               
           
        });
    }
    else
    {
        console.log("Your browser does not support File API");
    }
}
    </script>
    
        <label for="files">Select multiple files: </label>
        
        <output id="result" />
    

</html>
Afficher la suite 

Votre réponse

2 réponses

Meilleure réponse
@karamel 1655 Messages postés vendredi 9 mai 2008Date d'inscription 19 avril 2018 Dernière intervention - 27 mars 2013 à 22:04
3
Merci
bonjour si tu veut mettre un id c'est a cette endroit en faisant l’incrémentation d'une variable cree en amon


picReader.addEventListener("load",function(event){

var picFile = event.target;

var div = document.createElement("div");

div.id=id+variable_a_incrementer
variable_a_incrementer++

div.innerHTML = "";

output.insertBefore(div,null);

Merci @karamel 3

codes-sources a aidé 81 internautes ce mois-ci

Commenter la réponse de @karamel
ghaziguesmi 5 Messages postés lundi 24 novembre 2008Date d'inscription 28 mars 2013 Dernière intervention - 28 mars 2013 à 09:04
0
Merci
Bonjour;
Merci bcp kazam :) pour ta réponse il mais mon code ne fonctionne pas
merci



siblle




body{
font-family: 'Segoe UI';
font-size: 12pt;
}

header h1{
font-size:12pt;
color: #fff;
background-color: #1BA1E2;
padding: 20px;

}
article
{
width: 80%;
margin:auto;
margin-top:10px;
}


.thumbnail{

height: 100px;
margin: 10px;
}


















Picots


































je veux ......


j'ai faim


j'ai soif


je veux aller aux toilettes


je veux ........


je veux manger


tu peux.........


tu peux.........


tu peux.........


tu peux.........


tu peux.........


tu peux.........
















// Custom drop action for the country boxes
function dropItems(idOfDraggedItem,targetId,x,y)
{
var targetObj = document.getElementById(targetId); // Creating reference to target obj
var subDivs = targetObj.getElementsByTagName('DIV'); // Number of subdivs
if(subDivs.length>0 && targetId!='capitals')return; // Sub divs exists on target, i.e. element already dragged on it. => return from function without doing anything
var sourceObj = document.getElementById(idOfDraggedItem); // Creating reference to source, i.e. dragged object
var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1; // Find numeric id of target
var numericIdSource = idOfDraggedItem.replace(/[^0-9]/gi,'')/1; // Find numeric id of source
if(numericIdTarget-numericIdSource==100){ // In the html above, there's a difference in 100 between the id of the country and it's capital(example:
// Oslo have id "box1" and Norway have id "box101", i.e. 1 + 100.
sourceObj.style.backgroundColor='#FFF'; // Set green background color for dragged object
}else{
sourceObj.style.backgroundColor=''; // Reset back to default white background color
}
if(targetId=='capitals'){ // Target is the capital box - append the dragged item as child of first sub div, i.e. as child of

targetObj = targetObj.getElementsByTagName('DIV')[0];
}
targetObj.appendChild(sourceObj); // Append
}



var dragDropObj = new DHTMLgoodies_dragDrop(); // Creating drag and drop object

// Assigning drag events to the capitals
dragDropObj.addSource('box1',true); // Make
dragable. slide item back into original position after drop
dragDropObj.addSource('box2',true); // Make
dragable. slide item back into original position after drop
dragDropObj.addSource('box3',true); // Make
dragable. slide item back into original position after drop
dragDropObj.addSource('box4',true); // Make
dragable. slide item back into original position after drop
dragDropObj.addSource('box5',true); // Make
dragable. slide item back into original position after drop
dragDropObj.addSource('box6',true); // Make
dragable. slide item back into original position after drop
dragDropObj.addSource('box7',true); // Make
dragable. slide item back into original position after drop

// Assigning drop events on the countries
dragDropObj.addTarget('box101','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box102','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box103','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box104','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box105','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box106','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box107','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box108','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box109','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box110','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box111','dropItems'); // Set
as a drop target. Call function dropItems on drop
dragDropObj.addTarget('box112','dropItems'); // Set
as a drop target. Call function dropItems on drop

dragDropObj.addTarget('capitals','dropItems'); // Set
as a drop target. Call function dropItems on drop

dragDropObj.init(); // Initizlizing drag and drop object
















deg) ">
" alt="" title="" />




@ KB












window.onload = function(){

//Check File API support
if(window.File && window.FileList && window.FileReader)
{
var filesInput = document.getElementById("files");

filesInput.addEventListener("change", function(event){

var files = event.target.files; //FileList object
var output = document.getElementById("result");

for(var i = 0; i< files.length; i++)
{
var file = files[i];

//Only pics
if(!file.type.match('image'))
continue;

var picReader = new FileReader();

picReader.addEventListener("load",function(event){

var picFile = event.target;

var div = document.createElement("div");

/*div.id=id+variable_a_incrementer
variable_a_incrementer++ */

div.innerHTML = "";

output.insertBefore(div,null);

});

//Read the image
picReader.readAsDataURL(file);
}

});
}
else
{
console.log("Your browser does not support File API");
}
}


tu peux selectionner plusieur image






Commenter la réponse de ghaziguesmi

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.