Sujet Précédent Sujet Suivant

Drad and drop et file reader

Résolu
ghaziguesmi Messages postés 5 Date d'inscription lundi 24 novembre 2008 Statut Membre Dernière intervention 28 mars 2013 - 27 mars 2013 à 17:02
ghaziguesmi Messages postés 5 Date d'inscription lundi 24 novembre 2008 Statut Membre Dernière intervention 28 mars 2013 - 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>

2 réponses

Réponse 1 / 2
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
27 mars 2013 à 22:04
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);
3
Réponse 2 / 2
ghaziguesmi Messages postés 5 Date d'inscription lundi 24 novembre 2008 Statut Membre Dernière intervention 28 mars 2013
28 mars 2013 à 09:04
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






0

Discussions similaires

un petit programme pour lire un code barre
saberkhalil -
randriano -

3 réponses
drag and drop d'une image d'une page web lancée depuis un webbroswer
chrisledeveloppeur -
chrisledeveloppeur -

6 réponses
evenment clic + drag and drop sur une pictureBox
mimi2610 -
mimi2610 -

6 réponses
Drag and drop dans un tableau HTML
dedeisep2 -
bizibiz17 -

6 réponses
Drag and drop en VBA
ankhn -
ucfoutu -

1 réponse
Rejoignez-nous