1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

Drad and drop et file reader [Résolu]

Signaler
Messages postés
5
Date d'inscription
lundi 24 novembre 2008
Statut
Membre
Dernière intervention
28 mars 2013
 -
Messages postés
5
Date d'inscription
lundi 24 novembre 2008
Statut
Membre
Dernière intervention
28 mars 2013
 -
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
A voir également:

2 réponses

Réponse 1 / 2
Messages postés
1768
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 octobre 2020
 104
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);
Réponse 2 / 2
Messages postés
5
Date d'inscription
lundi 24 novembre 2008
Statut
Membre
Dernière intervention
28 mars 2013
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






Répondre Posez votre question