Adding Metadata to an Html5 File Download

Question

Is it possible to add metadata along with html 5 images before uploading them?

Explanation : html Download 5 images (e.g. drag and drop thumbnail method or single input file) HTML sample 5 Download / drag _drop

Let's say the user uploads 10 images, he fills in some text information for each image that describes it, then this information will be stored on the server. Thus, for each user's sketch, you can add a "title", "location", "description" in the text fields.

the example below allows you to upload a single image and preview the thumbnail, what I'm trying to achieve is to interact with this thumbnail and send some text to the server along with it.

document.getElementById("files").onchange = function () {
    var reader = new FileReader();

    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

<input type="file" id="files" />
<img  width="100" height="140" id="image" />

Run codeHide result

Answer 1

I am not sure why you are voting for this question. This may have something to do with your wording. I assume that you mean Exif data, not metadata. See https://en.wikipedia.org/wiki/Exif

To change Exif image data in JavaScript, you can use piexifjs hMatoba, this will allow you to modify Exif image metadata before uploading it to the server.

Hope this helps)

Answer 2

, , . charlietfl , FormData :

, , :

   {
  "args": {}, 
  "data": "", 
  "files": {
    "input1": "yourimg1", 
    "input2": "yourimg2"
  }, 
  "form": {
    "input1": [
      "house", 
      "london"
    ], 
    "input2": [
      "bridge", 
      "berlin"
    ]
  }, 
  "headers": {
    ....
}

, . , beloning .

, input1 input1 input2 input2 ..

, , this .

. js

console.log(request.response);

URL http://httpbin.org/post.

.

EDIT:

, :

var testForm = document.getElementById('test-form');
var div = document.getElementById('output');
var data;
  testForm.onsubmit = function(event) {
    event.preventDefault();
    var request = new XMLHttpRequest();
    request.open('POST', 'http://your.url/post', /* async = */ false);

    var formData = new FormData(document.getElementById('test-form'));

    request.send(formData);
  }
  
  function handleFileSelect(evt) {
    var files = evt.target.files;

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = 
          [
            '<img src="', 
            e.target.result,
            '" title="',
            escape(theFile.name), 
            '"/><div class="desc"><div>Location:<input name="',
            escape(theFile.name),
            '"> </div><br><div>Title:<input name="',
            escape(theFile.name),
            '"></div><br><div>Description:<input name="',
            escape(theFile.name),
            '"></div><br></div>'
          ].join('');
          
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }
  
//makes description visible  	 	
$(document).on("click","img",function(){
        $(this).next().css("display", "block");
    });


  document.getElementById('files').addEventListener('change', handleFileSelect, false);

.desc{
  display:none;
}
img{
  height: 75px;
  border: 1px solid #000;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='test-form'>
  <input type="file" id="files" name='input1' multiple/><br>
  <output id="list"></output><br>
  <input type='submit'>
</form>

Hide result

:

{
  "args": {}, 
  "data": "", 
  "files": {
    "input1": "all_your_images"
  }, 
  "form": {
    "favicon.png": [
      "1a", 
      "1b", 
      "1c"
    ], 
    "loginBackground.jpg": [
      "2a", 
      "2b", 
      "2c"
    ]
  }, 
  "headers": {
   ....}

, . , .

<div>Location:<input name="', escape(theFile.name),'"> </div>

.

, - , PHP.

$filename = pathinfo($_FILES['picture']['name'], PATHINFO_FILENAME);

(. )

, , . , . , .

, tnt-rox. exif.

Answer 3

, . ,

HTML,

<Form action="imageSave.php" method="Post">
 <table>
  <tr>
    <td> Title </td>
    <td> <input type="text" name="imageTitle" > </td> 
  <tr>
  <tr>
    <td> Location</td>
    <td> <input type="text" name="imageLocation" > </td> 
  <tr>
  <tr>
    <td> Description</td>
    <td> <textarea name="description" > </textarea> </td> 
  <tr>
  <tr>
    <td> Image </td>
    <td> <input type="file" name="files" > </td> 
  <tr>
 </table>
</Form>

,

• TableName: tblImages
• 1: id [int]
• 2: imageTitle [varchar (255)]
• 3: imageLocation [varchar (255)]
• 4: []
• 5: imageName [varchar (255)]

PHP (imageSave.php)

$imageTitle=$_POST['imageTitle'];
$imageLocation=$_POST['imageLocation'];
$description=$_POST['description'];
$imageName=$_FILES['files']['name'];

if ($_FILES["files"]["error"] == 0)
{
  $remove_these = array(' ','`','"','\'','\\','/','(',')');
  $newname = str_replace($remove_these,'',$_FILES['files']['name']);
  //Make the filename unique
  $newname = time().".".$extension;
  //Save the uploaded the file to another location
  $upload_path = "/images/$newname";
  //echo $upload_path;
  move_uploaded_file($_FILES['files']['tmp_name'], $upload_path);

  // Query and Code to Update the Database
}

Answer 4

, , . , , ,

var count = 0;
document.getElementById("files").onchange = function (e) {
  var image = document.createElement("img");
  
  image.width = "100";
  for(var i=0;i<this.files.length;i++){
    var reader = new FileReader();
    reader.onload = function (e) {
      //Add the image
      var im = image.cloneNode();
      im.id= "image"+count;
      im.src = e.target.result;
      document.body.appendChild(im);
      //Add the title for example
      var title = document.createElement("input");
      title.id = "title-img"+count;
      title.placeholder= "Enter the title of image "+count;
      document.body.appendChild(title);
      count++;
    };
    reader.readAsDataURL(this.files[i]);
  }
};

<html>
	<head>
	</head>
	<body>
        <input type="file" multiple id="files" />
	</body>

</html>

Hide result

, .