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" />
Avbryt
</form>
</div>
</div>
Related
I create an HTML form with Admin Button and in the .js file I wrote a click Event in Admin Button to change from:
style='display:none'
to:
style='display:block'
but it's not working. Why?
var adminMode = {
init: function() {
this.adminButton = document.getElementById('admin-button');
this.adminForm = document.getElementById('admin-form');// form ID
this.allForm = document.getElementById('all-form'); //div ID
this.adminButton.addEventListener('click', function (allForm) {
this.adminForm.style.display = 'inline'
});
},
HTML
<button id='admin-button'>Admin</button> <br><br>
<div id='all-form'>
<form id='admin-form' style='display:none'>
Name:<br>
<input type="text" name="firstname" value=" "> <br><br>
Img URL:<br>
<input type="text" name="lastname" value=" "> <br><br>
<button> Save</button>
<button>Cancel</button>
</form>
</div>
var adminMode = { init: function() {
this.adminButton = document.getElementById('admin-button');
//this.adminForm = document.getElementById('admin-form');// form ID
//this.allForm = document.getElementById('all-form'); //div ID
this.adminButton.addEventListener('click', function (event) {
document.getElementById('admin-form').style.display = 'inline'
});
},
That what you mean
init: function() {
document.getElementById('admin-button').addEventListener('click', function () {
document.getElementById('allForm').style.display = 'block';
});
}
OR admin-form
init: function() {
document.getElementById('admin-button').addEventListener('click', function () {
document.getElementById('admin-form').style.display = 'block';
});
}
If you write function() the this is not known....
For your Edit: put the function in script no init()
function dispaly(){
document.getElementById('admin-form').style.display = 'block';
}
<button id='admin-button' onclick="dispaly()">Admin</button> <br><br>
<div id='all-form'>
<form id='admin-form' style='display:none'>
Name:<br>
<input type="text" name="firstname" value=" "> <br><br>
Img URL:<br>
<input type="text" name="lastname" value=" "> <br><br>
<button> Save</button>
<button>Cancel</button>
</form>
</div>
Newbie here. Using html and Javascript. It was working until I added a side menu. I had it set up with the submit button inside the side menu under the download function. I only included code for the first few questions and answers. The image local storage work sometimes. I'm running it on notepad++ and with chrome.
function save() {
//question1
var question1 = document.getElementById("question1")
var correctanswer1 = document.getElementById("correctanswer1");
var incorrect11 = document.getElementById("incorrect11");
var incorrect12 = document.getElementById("incorrect12");
var incorrect13 = document.getElementById("incorrect13");
try {
//question1
localStorage.setItem("question1", question1.value);
sessionStorage.setItem("question1", question1.value);
localStorage.setItem("correctanswer1", correctanswer1.value);
sessionStorage.setItem("correctanswer1", correctanswer1.value);
localStorage.setItem("incorrect11", incorrect11.value);
sessionStorage.setItem("incorrect11", incorrect11.value);
localStorage.setItem("incorrect12", incorrect12.value);
sessionStorage.setItem("incorrect12", incorrect12.value);
localStorage.setItem("incorrect13", incorrect13.value);
sessionStorage.setItem("incorrect13", incorrect13.value);
//question 1
question1value = "";
correctanswer1value = "";
incorrect11.value = "";
incorrect12.value = "";
incorrect13.value = "";
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
console.log("Error: Local Storage limit exceeds.");
} else {
console.log("Error: Saving to local storage.");
}
}
}
<div id="sidebar">
<ul>
Top of Page
<p>Download </p>
<p>
Submit </ul>
</p>
</div>
<div class="center">
Enter Question 1:
<input type="text" id="question1" name="Question 1" size="40">
<br>
<br> Next, add a correct answer
<font color="#51096F"> FIRST </font> and then the incorrect answers for your question.
<br>
<p>
<input type="text" id="correctanswer1" name="correctanswer1" size="50" style="border:2px solid #660570">
</p>
<p>
<input type="text" id="incorrect11" name="incorrect11" size="50">
</p>
<p>
<input type="text" id="incorrect12" name="incorrect12" size="50">
</p>
<p>
<input type="text" id="incorrect13" name="incorrect13" size="50">
</p>
<br>
<img id="uploadPreview1" style="width: 100px; height: 100px;" />
<input id="uploadImage1" type="file" name="myPhoto1" onchange="PreviewImage1();" />
<script type="text/javascript">
function PreviewImage1() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage1").files[0]);
oFReader.onload = function(oFREvent) {
document.getElementById("uploadPreview1").src = oFREvent.target.result;
sessionStorage.setItem("image", oFREvent.target.result);
localStorage.setItem("image", oFREvent.target.result);
};
};
</script>
</div>
Anyone can show me what is wrong with my code? It show picture after change input but still in first input
It changes only first input everytime
Here is the code
$(document).ready(function() {
function readURL(input, data) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
var blah = '#blah' + data;
$(blah).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".active_file").change(function() {
var data = $(this).data('im');
var img_div = '#img_div' + data;
var img_id = '#image_id' + data;
$(img_id).html('<img id="blah' + data + '" src="#" alt="your image" />');
alert(data);
readURL(this, data);
data = data + 1;
$(this).removeClass('active_file');
$(img_div).after('<div class="col-md-2 img_div" id="img_div' + data + '" ><input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im=' + data + '><label class="col-md-12 image " for="fileI" id = "image_id' + data + '"> <i class="fa fa-cloud-upload"></i><br>Nahrať obrázok..</label></div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 gallery">
<div class="row galeria_row">
<div class="col-md-2 img_div" id="img_div1">
<input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im='1'>
<label class="col-md-12 image " for="fileI" id="image_id1"> <i class="fa fa-cloud-upload"></i>
<br>Nahrať obrázok..</label>
</div>
</div>
</div>
</div>
You need to use delegate event of jQuery because your DOM is being updated in real time.
So instead of doing:
$(".active_file").change(function() {
do this
$(document).on('change', '.active_file', function(){
$(document).ready(function(){
function readURL(input,data) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var blah = '#blah' + data;
$(blah).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(document).on('change', '.active_file', function(){
var data = $(this).data('im');
var img_div = '#img_div' + data;
var img_id = '#image_id' + data;
$(img_id).html('<img id="blah'+data+'" src="#" alt="your image" />');
alert(data);
readURL(this,data);
data = data + 1;
$(this).removeClass('active_file');
$(img_div).after('<div class="col-md-2 img_div" id="img_div'+data+'" ><input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im='+data+'><label class="col-md-12 image " for="fileI" id = "image_id'+data+'"> <i class="fa fa-cloud-upload"></i><br>Nahrať obrázok..</label></div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 gallery">
<div class="row galeria_row">
<div class="col-md-2 img_div" id="img_div1" >
<input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im='1'>
<label class="col-md-12 image " for="fileI" id = "image_id1"> <i class="fa fa-cloud-upload"></i>
<br>Nahrať obrázok..</label>
</div>
</div>
</div>
</div>
I want to upload file along with other field data but all other data will posted but how to post file through ajax to controller.
my view file
<form method="post"action=""id="meetingform"enctype="multipart/form-data" >
<label for="inputEmail4">Meeting Date</label>
<input type="text" id="date" name="meetingdate">
<label for="inputEmail2" >Subject</label>
<input type="text" id="subjectt" name="subject" placeholder="Subject">
<input type="hidden" name="meetingevent" value="Meeting"/>
<label for="inputEmail2" >Venue</label>
<input type="text" id="venuee" name="venue" placeholder="Venue" >
<label for="inputEmail2" >Description</label>
<textarea name="description" id="desc" placeholder="Description" >
</textarea>
<label for="inputEmail2" >MOM</label>
<input type="text" id="momm" name="mom" placeholder="MOM" >
<input type="file" name="photo" id="photo">
<input type="file" name="document" id="documents">
<button type="button" id="submit"> </button>
</form>
my script is
<script>
$(document).ready(function () {
$("#submit").click(function (e) {
$.ajax({
url: '<?php echo site_url() ?>admin/meeting_form',
type: 'POST',
fileElementId :'photos',
data: $("#meetingform").serialize(),
success: function () {
$('#msg').html('<span style="color:green;align:center;">Data
Posted.</span>');
$('#date').val('');
$('#subjectt').val('');
$('#venuee').val('');
$('#desc').val('');
$('#momm').val('');
$('#photo').val('');
$("#msg").delay(3000).fadeOut();
},
error: function () {
$('#msg').html('<span style="color:red;">Data didnot post .
</span>');
}
});
});
});
</script>
my controller
public function meeting_form() {
$session_data = $this->session->userdata('admin_logged_in');
$id = $session_data['id'];
if ($session_data) {
$this->form_validation->set_rules('meetingdate', 'Meeting Date',
'required');
$this->form_validation->set_rules('subject', 'Subject', 'required');
$this->form_validation->set_rules('venue', 'Venue', 'required');
$this->form_validation->set_rules('description', 'Description','required');
$this->form_validation->set_rules('mom', 'MOM', 'required');
if ($this->form_validation->run() == false)
{
$this->load->view('project_monnetering');
}
else
{
$data = array('event_date' => date('y-m-d', strtotime($this-
>input->post('meetingdate'))), 'event_type' => $this->input-
>post('meetingevent'), 'user_id' => $id,
'post_description' => $this->input->post('description'));
$last_id = $this->admin_model->insert_event_master($data);
$data1 = array('meeting_date' => date('y-m-d', strtotime($this-
>input->post('meetingdate'))), 'event_id' => $last_id, 'subject'
=> $this->input->post('subject'),
'venue' => $this->input->post('venue'), 'brief_desc' =>
$this->input->post('description'), 'mom' => $this->input-
>post('mom'));
$this->admin_model->insert_meeting_details($data1);
redirect('admin/project_monnetering', 'refresh');
}
} else {
$this->load->view('login');
}
}
How can i upload file along with other filed data here?
Please check below mentioned solution, This will help you to send file with input data.
var myFormData = new FormData();
$(document).on("click", "button", function(e) {
e.preventDefault();
var inputs = $('#my_form input[type="file"]');
$.each(inputs, function(obj, v) {
var file = v.files[0];
var filename = $(v).attr("data-filename");
var name = $(v).attr("id");
myFormData.append(name, file, filename);
});
var inputs = $('#my_form input[type="text"]');
$.each(inputs, function(obj, v) {
var name = $(v).attr("id");
var value = $(v).val();
myFormData.append(name, value);
});
var xhr = new XMLHttpRequest;
xhr.open('POST', '/echo/html/', true);
xhr.send(myFormData);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my_form" enctype="multipart/form-data">
<input type="file" name="file_1" id="file_1" data-filename="image.jpg">
<input type="text" name="check1" id="check1"/>
<input type="text" name="check2" id="check2"/>
<input type="text" name="check3" id="check3"/>
<button>click</button>
</form>
Let me know if it not works.
I'm attempting to clear all inputs with the class "new" on blur, but for some reason it just won't work. I've bashed my head at the this for three hours now, which obvious point am I missing? Relevant code below.
UPDATE 2
I tried changing out the switch-case block with corresponding if blocks, and they give the expected result. This eliminates the current problem, but I don't find it to be a viable answer to the original question which is why my origianl code with switch-case doesn't work.
UPDATE 1
After some research and experimenting I've discovered that I can clear all inputs with the class "new" as long as they're not inside my switch-case block. The selector I'm testing with is $('.new'), once inside the switch-case block this gives no visible effect.
#{
ViewBag.Title = "Viser infrastruktur";
Layout = "~/Views/Shared/_SuperOfficeLayout.cshtml";
}
<table class="table table-striped compact hover row-border">
<thead>
<tr>
<th>Produsent</th>
<th>Modell</th>
<th>Serienummer</th>
<th>Firmware</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave new" name="manufacturer" placeholder="Produsent" value="" />
<input type="hidden" class="autosave new" name="id" value="" />
<input type="hidden" class="autosave new" name="superOfficeCustomerId" value="#Model.SuperOfficeCustomerId" />
</div>
</td>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave new" name="model" placeholder="Modell" />
</div>
</td>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave new" name="serialNumber" placeholder="Serienummer" />
</div>
</td>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave new" name="firmware" placeholder="Firmware" />
</div>
</td>
</tr>
#foreach (var infrastructure in Model.Infrastructures)
{
<tr>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave" name="manufacturer" placeholder="Produsent" value="#infrastructure.Manufacturer" />
<input type="hidden" class="autosave" name="id" value="#infrastructure.Id" />
<input type="hidden" class="autosave" name="superOfficeCustomerId" value="#Model.SuperOfficeCustomerId" />
</div>
</td>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave" name="model" placeholder="Modell" value="#infrastructure.Model" />
</div>
</td>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave" name="serialNumber" placeholder="Serienummer" value="#infrastructure.SerialNumber" />
</div>
</td>
<td>
<div class="control-group">
<input type="text" class="col-md-12 form-control autosave" name="firmware" placeholder="Firmware" value="#infrastructure.Firmware" />
</div>
</td>
</tr>
}
</tbody>
#section SpecializedScripts
{
<script type="text/javascript">
function saveSettings(element, ajaxUrl, ajaxType) {
var fields = $(element).closest('tr').children('td').children('div').children('.autosave');
var abort = false;
var ajaxData = {};
$(fields).each(function () {
abort = ($(this).val() == '' || $(this).val() == null);
backgroundColor = abort == true ? '#d9534f' : '#f9f598';
$(this).css('background-color', backgroundColor).css('color', '#ffffff').stop().animate({ 'background-color': '#ffffff', 'color': '#000000' }, 1500);
ajaxData[$(this).prop('name')] = $(this).val();
});
if (abort == true) {
return false;
}
$.ajax({
url: ajaxUrl,
type: ajaxType,
data: ajaxData
}).success(function (data, textStatus, jqXHR) {
$(fields).each(function() {
$(this).css('background-color', '#5cb85c').css('color', '#ffffff').stop().animate({ 'background-color': '#ffffff', 'color': '#000000' }, 1500);
});
switch(data.status)
{
case 'Deleted':
$(element).closest('tr').remove();
break;
case 'Added':
var tableBody = $('tbody');
var html = '<tr>';
for (var field in data.result) {
if (field == 'id' || field == 'superOfficeCustomerId')
{
html += '<input type="hidden" class="autosave" name="' + field + '" value="' + data.result[field] + '" />';
}
else {
html += '<td>'
+ '<div class="control-group">'
+ '<input type="text" class="col-md-12 autosave form-control" name="' + field + '" value="' + data.result[field] + '" />'
+ '</div>'
+ '</td>';
$('input.new[name=' + field + ']').val('');
}
}
html += '</tr>';
$(tableBody).append(html);
case 'Modified':
$(fields).each(function () {
$(this).val(data.result[$(this).prop('name')]);
});
break;
}
}).fail(function () {
});
}
$(document).on('blur', 'input.autosave', function () {
saveSettings($(this), '/Link/SaveInfrastructure', 'POST');
});
$(document).on('change', 'input.new', function () {
});
</script>
}
Something like this should work:
$('input.new').on('blur', function() { $(this).val(''); $(this).text(''); });
just make sure the input exists when you bind the event otherwise you can do:
$(document).on('blur', 'input.new', function() { $(this).val(''); $(this).text(''); });
For vanilla JavaScript, you can use
<input onBlur={(event) => { event.target.value = ''; }} />