0

With this code, I have succeed multiuploading from desktop. But the same script doesn't upload any images from a mobile phone. What could be wrong? Is there anyone who is a javascript master who knows a solution for multiuploading from mobile phones? I am not a very good javascript developer and I can not find a solution for this problem. Is there something special I need to do for javascript mobile uploads?

//upload


var abc = 0;

$(document).ready(function() {


  $('#add_more').click(function() {
    $(this).before($("<div/>", {
      id: 'filediv'
    }).fadeIn('slow').append(
      $("<input/>", {
        name: 'file[]',
        type: 'file',
        id: 'file'
      }),
      $("<br/><br/>")
    ));
  });


  $('body').on('change', '#file', function() {
    if (this.files && this.files[0]) {
      abc += 1;

      var z = abc - 1;
      var x = $(this).parent().find('#previewimg' + z).remove();
      $(this).before("<div id='abcd" + abc + "' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");

      var reader = new FileReader();
      reader.onload = imageIsLoaded;
      reader.readAsDataURL(this.files[0]);

      $(this).hide();
      $("#abcd" + abc).append($("<img/>", {
        id: 'img',
        src: 'x.png',
        alt: 'delete'
      }).click(function() {
        $(this).parent().parent().remove();
      }));
    }
  });

  //To preview image     
  function imageIsLoaded(e) {
    $('#previewimg' + abc).attr('src', e.target.result);
  };

  $('#upload').click(function(e) {
    var name = $(":file").val();
    if (!name) {
      alert("First Image Must Be Selected");
      e.preventDefault();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="flag">

    <form id="skickanytt" action="" method="post" enctype="multipart/form-data">
      <div class="form-group">
        <label>Titel:</label>
        <input type="text" name="title" class="form-control" placeholder="Enter a title" />
      </div>

      <div class="form-group">
        <label>Message:</label>
        <textarea class="form-control" rows="3" name="content" placeholder="Enter content"></textarea>
      </div>


      <div class="form-group">
        <label>Image:</label>
        <div id="filediv"><input name="file[]" type="file" id="file" /></div><br/> </div>

      <h5><b> Label question?</b></h5>
      <label><input type="radio" id="radioinput1" value="radioinput1" name="readornot">1</input></label> &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      <label><input type="radio" id="radioinput2" value="radioinput2" name="readornot" >2</input></label>
      <br>
      <button type="submit" name="submit" class="btn btn-success">submit</button>
      <input type="button" id="add_more" class="upload" value="Add more images" />

      <a href="index.php" class="btn btn-danger">Avbryt</a>
    </form>

  </div>
</div>
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
J. Doe
  • 63
  • 1
  • 1
  • 12
  • `` is a *Void* type of element, and just like `img` or `br` it cannot have a closing `` tag. Also, put other method like `append:` or `fadeIn:` in the same block where you have `id:` – Roko C. Buljan Jun 06 '17 at 22:44
  • Also, by clicking the `$('#add_more')` you're adding all over again elements with the same `filediv` ID and `file` ID. As you know probably ID should be unique. – Roko C. Buljan Jun 06 '17 at 22:50
  • Also your form makes no sense from a UX and UI perspective. Why you have an additional `Add more images` button? What's wrong with the first one? – Roko C. Buljan Jun 06 '17 at 22:52
  • What do you mean with append: and fadeIn: in the same block as id:? Do you mean the same block in html or somewhere else? And this code works perfect on desktop. I can upload as many images as I want with this code on my computer. Why does it not work on mobile? – J. Doe Jun 06 '17 at 22:57
  • Also, multiuploading could be better handled by an `input` of `type=file` with `multiple` attribute as you can see in action [here](https://stackoverflow.com/a/39440179/383904) and [here](https://stackoverflow.com/a/12570870/383904)... and elsewhere. (Remember to use CTRL to select multiple images...) – Roko C. Buljan Jun 06 '17 at 22:57
  • This is only for testing purpose. I will make it more clean when I know it works on mobile. – J. Doe Jun 06 '17 at 22:58
  • Think about it this way: it's possible that it would work on mobile if it were cleaner. Or it might not, but you'd have a better chance of finding the error. – Clonkex Jun 06 '17 at 23:00
  • Exactly like @Clonkex said, I just tested your (a bit weird code) and it worked aswell. Android. – Roko C. Buljan Jun 06 '17 at 23:01
  • It works good on computer but not on my phone. Something must be wrong. I have triad to add multiple on input and it still doesn't make sense. And here is my php part and nobody can help me with it. I dont know what is wrong actually maybe something is wrong with php part: https://stackoverflow.com/questions/44395329/image-uploading-with-php-does-work-on-computer-but-not-on-phone?noredirect=1#comment75791930_44395329 – J. Doe Jun 06 '17 at 23:09

0 Answers0