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>
<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>