JS hide/remove dynamically div with same class name - javascript

To make it short, I have a table with multiple rows. Beneath each main row I have a hidden row, that when pressed, presents an input to upload files and a button to make the upload.
What I am trying to make is show a .gif while its processing the images and removed the .gif when its done so that the user is aware that something is actually happening. Each "upload" row has its own .gif, so when clicking on the upload button the .gif should change from display: none to visible/inline-block. A fetch is done to upload the files and if successful it should remove the .gif, the only problem is that the js does not remember the rest first .gifs.
Ill attach some images and then the js code.
Here you can see, if you press on the + sign, it shows the row beneath it, while row with ID 4 and 5 are hidden because the button was not pressed.
Here is during the upload process, what happens when I click on Upload, the .gif is added.
In this third one, all 3 were already done since I have an alert as a confirmation for debug purpose. Though you can see that only one disappeared and the rest still have the .gif visible. What I want is that as soon as the response from the fetch is ok, it should remove the respective .gif, though I have no clue on how to tackle this or even how to start. I thought maybe about an array that stores which ones were received through a data-* but then it did not make sense since i would need to send response from the server with that number.
The code:
function uploadPhotos(url, queryCollection){
this.url = url;
this.queryCollection = queryCollection;
this.upload = function(){
queryCollection.forEach(function(el){
el.addEventListener('submit', e => {
loadingGifEl = el.nextElementSibling;
button = el.closest('form').querySelector('input[type=submit]');
e.preventDefault();
if (loadingGifEl.classList.contains('hidden')) {
loadingGifEl.classList.remove('hidden');
button.classList.add('hidden');
}
const files = el.querySelector('[type=file]').files;
// const contentID = el.closest('tr').getAttribute('data-content-id');
if(el.closest('tr') == null){
var contentID = 0;
}else{
var contentID = el.closest('tr').getAttribute('data-content-id');
}
let formData = new FormData();
for (let i = 0; i < files.length; i++) {
let file = files[i];
formData.append('image_field[]', file, contentID + '___' + file.name);
}
/* Original working */
fetch(url, {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
if (this.button.classList.contains('hidden')) {
this.loadingGifEl.classList.add('hidden');
this.button.classList.remove('hidden');
}
if(Number.isInteger(parseInt(data)) != true)
alert('Erro ao inserir na base de dados');
console.log(data);
})
.catch(function(error){
if (this.button.classList.contains('hidden')) {
this.loadingGifEl.classList.add('hidden');
this.button.classList.remove('hidden');
}
alert('Erro em fazer upload');
console.log(error);
});
});
});
}
}
How HTML is being built:
<table class="table table-hover" id="city-table">
<thead>
<th>ID</th>
<th>Nome(PT)</th>
<th>Descrição(PT)</th>
<th>Popular</th>
<th>Adicionado</th>
<th>Galeria</th>
<th>Ação</th>
</thead>
<tbody>
<?php
$resp = $city->fetchAll();
if(!empty($resp)){
for($cityCounter = 0; $cityCounter < count($resp); $cityCounter++){
switch($resp[$cityCounter]->isPopular){
case 0: $isPopular = 'Não';
break;
case 1: $isPopular = 'Sim';
break;
};
echo '<tr data-content-type="city" data-content-id="'.$resp[$cityCounter]->city_link_ID.'">';
echo '<td>'.$resp[$cityCounter]->city_link_ID.'</td>';
echo '<td>'.$resp[$cityCounter]->nameTranslated.'</td>';
echo '<td>'.$resp[$cityCounter]->descriptionTranslated.'</td>';
echo '<td>'.$isPopular.'</td>';
echo '<td>'.$resp[$cityCounter]->dateCreated.'</td>';
echo '<td>
<a class="btn btn-info btn-xs" id="show-gallery" href="#collapseGallery-'.$resp[$cityCounter]->city_link_ID.'" data-toggle="collapse">
<i class="lnr lnr-plus-circle"></i>
</a>
</td>';
echo '<td>
<span class="lnr lnr-pencil"></span>
<button class="btn btn-danger btn-xs pull-right" id="delete-city"><span class="lnr lnr-trash"></span></button>
</td></tr>';
echo'
<tr data-content-type="city" data-content-id="'.$resp[$cityCounter]->city_link_ID.'" id="collapseGallery-'.$resp[$cityCounter]->city_link_ID.'" class="collapse">
<td colspan="14" class="bg-info">
<form enctype="multipart/form-data" method="post" class="file-upload" id="'.$resp[$cityCounter]->city_link_ID.'">
<input type="file" class="btn btn-info pull-left" size="100" name="image_field[]" multiple="multiple">
<input type="submit" class="btn btn-primary pull-right" name="Submit" value="Upload">
</form>
<div class="loading-gif-'.$resp[$cityCounter]->city_link_ID.' hidden">
<img style="margin-left: 25%" src="assets/img/processing.gif" alt="A carregar"/>
</div>
</td>
</tr>
';
}
}
?>
</tbody>
</table>

The use of loadingGifEl vs this. loadingGifEl seems suspicious. If I understand your question correctly, you want to keep track of the actual gif you've shown so you can hide it again when fetch is done. The below should work, although not tested. If this is not what you want let me know.
function uploadPhotos(url, queryCollection){
this.url = url;
this.queryCollection = queryCollection;
this.upload = function(){
queryCollection.forEach(function(el){
el.addEventListener('submit', e => {
var loadingGifEl = el.nextElementSibling;
var button = el.closest('form').querySelector('input[type=submit]');
e.preventDefault();
if (loadingGifEl.classList.contains('hidden')) {
loadingGifEl.classList.remove('hidden');
button.classList.add('hidden');
}
const files = el.querySelector('[type=file]').files;
// const contentID = el.closest('tr').getAttribute('data-content-id');
if(el.closest('tr') == null){
var contentID = 0;
}else{
var contentID = el.closest('tr').getAttribute('data-content-id');
}
let formData = new FormData();
for (let i = 0; i < files.length; i++) {
let file = files[i];
formData.append('image_field[]', file, contentID + '___' + file.name);
}
/* Original working */
fetch(url, {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
if (button.classList.contains('hidden')) {
loadingGifEl.classList.add('hidden');
button.classList.remove('hidden');
}
if(Number.isInteger(parseInt(data)) != true)
alert('Erro ao inserir na base de dados');
console.log(data);
})
.catch(function(error){
if (button.classList.contains('hidden')) {
loadingGifEl.classList.add('hidden');
button.classList.remove('hidden');
}
alert('Erro em fazer upload');
console.log(error);
});
});
});
}
}

Related

When one div loads, the other div is deleted

Click here: henriquecosta.kdhost.eu.org, type the number 00008513 and choose a radio button and enter, then choose any 8-digit number and type. This part is working wonderfully after so much sacrifice for me, I'm not a programmer. The problem is that when another div is loaded, the previous one is deleted. I need all divs to remain on the page, in all it will be 40 divs. Yesterday I could not resolve with the localstorage, I think it is the solution, after that the script will be finished. Well, I'm happy with what I got so far. If anyone has any tips to give me, I'll be very grateful! Thank you.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<script>
var form = document.querySelector('form');
form.addEventListener('submit', function(e) {
e.preventDefault(); // <--- isto pára o envio da form
var url = this.action; // <--- o url que processa a form
var formData = new FormData(this); // <--- os dados da form
var ajax = new XMLHttpRequest();
ajax.open("GET", url, true);
ajax.onload = function() {
if (ajax.status == 200) {
var dados = JSON.parse(ajax.responseText);
alert('Dados enviados:\n' + JSON.stringify(dados, null, 4));
} else {
alert('Algo falhou...');
}
};
ajax.send(formData);
});
</script>
<form action="index.php">
Cartao:<input size="7" name="cartao" value="" required="" pattern="[0-9]{8}" type="text">
<input value="01" name="armario" type="radio" />01
<input value="02" name="armario" type="radio" />02
<input value="03" name="armario" type="radio" />03
<button type="submit">Enviar</button>
</form>
<table width=100% border=1>
<tbody>
<tr align=center valign="middle">
<td width=33%><div id="01"></div></td>
<td width=33%><div id="02"></div></td>
<td width=33%><div id="03"></div></td>
</tr>
</tbody>
</table>
<?php
if (isset($_GET['cartao'])):
$radioValue = $_GET['armario'];
$radiovalor = '"'.$radioValue.'"';
$file = 'banco.txt';
$searchfor = $_GET['cartao'];
//header('Content-Type: text/plain');
$contents = file_get_contents($file);
$pattern = preg_quote($searchfor, '/');
$pattern = "/^.*$pattern.*\$/m";
if(preg_match_all($pattern, $contents, $matches)):
json_encode($matches[0]);
$resultado = str_replace(array('"',' \r','[', ']'), '', htmlspecialchars(json_encode($matches[0]), ENT_NOQUOTES));
else:
$resultado = $_GET['cartao'];
endif;
else:
echo '';
endif;
// file_exists
if (isset($_GET['cartao'])) {
$path = './fotos/';
$recebe = $_GET['cartao'];
$img = $path.$recebe.".jpg";
if (file_exists($img)) {
$foto = '"<img width=80 height=80 src="'.$img.'">'; // existe
} else { $foto = ' <img width=80 height=80 src="./fotos/ausente.jpg">'; // não existe
}
}
?>
<script>
var x = '<?php echo $resultado, $foto; ?>';
var z = '<?php echo $radioValue; ?>';
document.getElementById(z).innerHTML += x;
</script>
</body>
</html>
There are several problems in your code which you are probably not aware of.
First of all, your whole page is reloaded everytime you click the "Enviar" button, because your javascript does not correctly prevent the default action.
To accomplish this, return false at the end of the function:
var form = document.querySelector('form');
form.addEventListener('submit', function(e) {
e.preventDefault(); // <--- isto pára o envio da form
var url = this.action; // <--- o url que processa a form
var formData = new FormData(this); // <--- os dados da form
var ajax = new XMLHttpRequest();
ajax.open("POST", url, true);
ajax.onload = function() {
if (ajax.status == 200) {
var dados = JSON.parse(ajax.responseText);
alert('Dados enviados:\n' + JSON.stringify(dados, null, 4));
} else {
alert('Algo falhou...');
}
};
ajax.send(formData);
return false;
});
By doing this, the whole page will not be reloaded.
Secondly, your server always returns a full html page, instead of differentiating, whether the url has been accessed by opening the page for the first time or if it received a request from your script.
If isset($_POST['cartao'] is true, than the request came from your javascript and you should return a JSON object containing the relevant data and build the html in your javascript and append it to your table.
I know that this all sounds a bit confusing if you are not a programmer but I hope I could point you in the right direction.
Once you return a JSON object from your server, I am happy to help you to render HTML from it in javascript.

Upload file with text using AJAX & ASP.NET

I am having trouble uploading a file and value from a textbox/textarea in a single AJAX post. The entire project was created with AJAX posts to send data and receive resulting html/data. This means every button is handled with javascript/jquery and not asp.net's default onClick. Searches online yield answers with file upload but none of them show or explain any way to pass other parameters/data along with it.
*EDIT - I am not receiving any specific errors or crash attempting this. I try to run the file upload code in the success of the note upload or vice versa. It doesn't seem to be able to run both even if I switch it to asynchronous. I am more trying to get ONE single AJAX post to send both the file and the note to be handled in one codebehind function.
*EDIT(due to duplicate flag) - This is ASP.NET, not php. Please fully read questions before jumping to duplicate/closed conclusions.
Below is code/example of what I have so far.
HTML :
<div id="Modal_New_Document" class="modal fade" role="dialog">
<div class="modal-dialog Modal-Wrapper">
<div class="modal-content">
<div class="modal-header Modal-Header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Upload New Document</h3>
</div>
<div class="modal-body Modal-Body">
<table>
<tr>
<th>Document :</th>
<td>
<input type="file" id="FileUpload_Modal_Document" />
</td>
</tr>
<tr>
<th>Note :</th>
<td>
<textarea id="TextArea_Modal_Document_Note" style="width: 400px;"></textarea>
</td>
</tr>
</table>
</div>
<div class="modal-footer Modal-Footer">
<button type="button" class="btn btn-success" onclick="enterDocumentInfo()">Upload</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is the most important part. I prefer to upload using the $.Ajax such as the example below. I was able to get only the file upload to work with the submitDocument()
Javascript :
function submitDocument()
{
var fileUpload = $("#FileUpload_Modal_Document").get(0);
var files = fileUpload.files;
var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append(files[i].name, files[i]);
}
var options = {};
options.url = "FileUploadHandler.ashx";
options.type = "POST";
options.data = data;
options.contentType = false;
options.processData = false;
options.success = function (result) { alert("Gud"); };
options.error = function (err) { alert(err.statusText); };
$.ajax(options);
}
$.ajax({
type: "POST",
url: "Lease_View.aspx/enterDocument",
data: JSON.stringify({
leaseID: leaseID,
userID: userID,
note: note
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function ()
{
// Gud
},
error: function ()
{
// Bad
}
});
Codebehind FileUpload
public class FileUploadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
if (context.Request.Files.Count > 0)
{
HttpFileCollection files = context.Request.Files;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i];
// Upload code here
}
}
context.Response.ContentType = "text/plain";
context.Response.Write("File(s) Uploaded Successfully!");
}
public bool IsReusable
{
get
{
return false;
}
}
}
WebMethod Codebehind
I prefer to be able to upload file through this instead of above.
[System.Web.Services.WebMethod]
public static void enterDocument(string leaseID, string userID, string note)
{
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnString"].ConnectionString);
SqlCommand cmd;
cmd = new SqlCommand("INSERT INTO Lease_Documents " +
"(File_Name) " +
"VALUES " +
"(#File_Name)", conn);
cmd.Parameters.AddWithValue("#File_Name", note);
conn.Open();
cmd.ExecuteNonQuery();
conn.Close();
}
I figured it out. Basically how to pass additional parameters is using data.append(name, value) in the javascript. You can receive the value in the .ashx handler by using (HttpContext)context.Request.Form["name"]. Unfortunately it is using the handler instead of the webmethod, but at least it works.
In Javascript
var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append(files[i].name, files[i]);
}
data.append("Note", note);
In Codebehind
string note = context.Request.Form["Note"].ToString();

Convert post-back to PHP via json to Ajax post

I am trying to integrate a Codeigniter application into Wordpress through a plugin. The codeigniter program is having difficulty in the control at this point when the customer confirms the data of a new appointment.
VIEW
<div id="wizard-frame-4" class="wizard-frame" style="display:none;">
<div class="frame-container">
<h3 class="frame-title"><?php echo $this->lang->line('step_four_title'); ?></h3>
<div class="frame-content row">
<div id="appointment-details" class="col-md-6"></div>
<div id="customer-details" class="col-md-6"></div>
</div>
</div>
<div class="command-buttons">
<button type="button" id="button-back-4" class="btn button-back"
data-step_index="4"><i class="icon-backward"></i>
<?php echo $this->lang->line('back'); ?>
</button>
<form id="book-appointment-form" style="display:inline-block" method="post">
<button id="book-appointment-submit" type="button" value="saveAppointment" name="submit1"
class="btn btn-success" onclick = "this.style.visibility='hidden', loading.style.visibility='visible'">
<i class="icon-ok icon-white"></i>
<?php
echo (!$manage_mode) ? $this->lang->line('confirm')
: $this->lang->line('update');
?>
</button>
<input type="hidden" name="csrfToken" />
<input type="hidden" name="post_data" />
</form>
</div>
</div>
JS:
$('#book-appointment-submit').click(function(event) {
var formData = jQuery.parseJSON($('input[name="post_data"]').val());
var postData = {
'csrfToken': GlobalVariables.csrfToken,
'id_users_provider': formData['appointment']['id_users_provider'],
'id_services': formData['appointment']['id_services'],
'start_datetime': formData['appointment']['start_datetime'],
};
if (GlobalVariables.manageMode) {
postData.exclude_appointment_id = GlobalVariables.appointmentData.id;
}
var postUrl = GlobalVariables.baseUrl + '/index.php/appointments/ajax_check_datetime_availability';
$.post(postUrl, postData, function(response) {
////////////////////////////////////////////////////////////////////////
console.log('Check Date/Time Availability Post Response :', response);
////////////////////////////////////////////////////////////////////////
if (response.exceptions) {
response.exceptions = GeneralFunctions.parseExceptions(response.exceptions);
GeneralFunctions.displayMessageBox('Unexpected Issues', 'Unfortunately '
+ 'the check appointment time availability could not be completed. '
+ 'The following issues occurred:');
$('#message_box').append(GeneralFunctions.exceptionsToHtml(response.exceptions));
return false;
}
if (response === true) {
$('#book-appointment-form').submit();
} else {
GeneralFunctions.displayMessageBox('Appointment Hour Taken', 'Unfortunately '
+ 'the selected appointment hour is not available anymore. Please select '
+ 'another hour.');
FrontendBook.getAvailableHours($('#select-date').val());
alert('#select-date');
}
}, 'json');
});
CONTROLLER:
if($this->input->post('submit2'))
{
$post_waiting = json_decode($_POST['post_waiting'], true);
$waitinglist = $post_waiting['appointment'];
$this->load->model('appointments_model');
$this->appointments_model->waitinglist_to_db($waitinglist);
$this->load->view('appointments/waiting_success');//return to book view
} else {
try {
$post_data = json_decode($_POST['post_data'], true);
$appointment = $post_data['appointment'];
$customer = $post_data['customer'];
if ($this->customers_model->exists($customer))
$customer['id'] = $this->customers_model->find_record_id($customer);
$customer_id = $this->customers_model->add($customer);
$appointment['id_users_customer'] = $customer_id;
$appointment['id'] = $this->appointments_model->add($appointment);
$appointment['hash'] = $this->appointments_model->get_value('hash', $appointment['id']);
$provider = $this->providers_model->get_row($appointment['id_users_provider']);
$service = $this->services_model->get_row($appointment['id_services']);
$company_settings = array(
'company_name' => $this->settings_model->get_setting('company_name'),
'company_link' => $this->settings_model->get_setting('company_link'),
'company_email' => $this->settings_model->get_setting('company_email')
);
It returns Customers_Model->exists(NULL) and says that customers email was not provided. This is all wrong and does not happen outside the frame. It appears that I cannot postback when the application is run within the wordpress page and shortcode. So, I believe I need to do an Ajax post instead. What would that look like in this case? Would it require major surgery on the code?
As I worked on this I narrowed down my question little by little and posted the solution here:
AJAX submit and 500 server error

AJAX Show Image after Upload

i working on uploading files using ajax for almost 3 hours and successfully managed to make it work, please check the code:
View
<div class="form-horizontal">
<div class="form-group">
#Html.Label("Choose Image(s)", new { #class = "control-label col-sm-3" })
<div class="col-sm-5">
<input type="file" name="UploadFile" id="UploadFile" accept=".png, .jpg, .gif" multiple />
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-3">
<input type="button" value="Save" id="save" class="add btn btn-primary" />
<div style="color:red">
#ViewBag.error
</div>
</div>
</div>
</div>
<div style="margin-top: 17px;">
#foreach (var item in Model.Content)
{
<div class="gallery">
<a href="#item.ImagePath" title="#item.Description" data-gallery>
<img src="#item.ThumbPath" alt="#item.Description" class="img-rounded" style="margin-bottom:7px;" />
</a>
<input type="button" class="delete btn btn-danger" value="Delete" data-picid="#item.PhotoId" />
</div>
}
</div>
Controller
[HttpPost]
public ActionResult Create(Photo photo)
{
var model = new Photo();
foreach (string file in Request.Files)
{
var fileContent = Request.Files[file];
if (fileContent.ContentLength == 0) continue;
model.Description = photo.Description;
var fileName = Guid.NewGuid().ToString();
var extension = System.IO.Path.GetExtension(fileContent.FileName).ToLower();
using (var img = System.Drawing.Image.FromStream(fileContent.InputStream))
{
model.ThumbPath = String.Format(#"/GalleryImages/thumbs/{0}{1}", fileName, extension);
model.ImagePath = String.Format(#"/GalleryImages/{0}{1}", fileName, extension);
// Save thumbnail size image, 100 x 100
SaveToFolder(img, fileName, extension, new Size(200, 200), model.ThumbPath);
// Save large size image, 800 x 800
SaveToFolder(img, fileName, extension, new Size(600, 600), model.ImagePath);
}
// Save record to database
model.CreatedOn = DateTime.Now;
db.Photos.Add(model);
db.SaveChanges();
}
return Json("File Uploaded Successfully");
}
JQuery/AJAX
<script type="text/javascript">
$('#UploadFile').on('change', function (e) {
var $this = $(this);
var files = e.target.files;
if (files.length > 0) {
if (window.FormData !== undefined) {
var data = new FormData();
for (var x = 0; x < files.length; x++) {
data.append("file" + x, files[x]);
}
$.ajax({
type: "POST",
url: '/Home/Create',
contentType: false,
processData: false,
data: data,
success: function (result) {
console.log(result);
//add code to refresh the gallery with the new uploaded image
},
error: function (xhr, status, p3, p4) {
var err = "Error " + " " + status + " " + p3 + " p4;
if (xhr.responseText && xhr.responseText[0] == "{")
err = JSON.parse(xhr.responseText).Message;
console.log(err);
}
});
} else {
alert("Error! This browser does not support file upload, please change your browser");
}
}
});
</script>
SavetoFolder
private void SaveToFolder(Image img, string fileName, string extension, Size newSize, string pathToSave)
{
// Get new image resolution
Size imgSize = NewImageSize(img.Size, newSize);
using (System.Drawing.Image newImg = new Bitmap(img, imgSize.Width, imgSize.Height))
{
newImg.Save(Server.MapPath(pathToSave), img.RawFormat);
}
}
NewImageSize
public Size NewImageSize(Size imageSize, Size newSize)
{
Size finalSize;
double tempval;
if (imageSize.Height > newSize.Height || imageSize.Width > newSize.Width)
{
if (imageSize.Height > imageSize.Width)
tempval = newSize.Height / (imageSize.Height * 1.0);
else
tempval = newSize.Width / (imageSize.Width * 1.0);
finalSize = new Size((int)(tempval * imageSize.Width), (int)(tempval * imageSize.Height));
}
else
finalSize = imageSize; // image is already small size
return finalSize;
}
but the problem is i have to refresh the browser to see the added image, what should i put in ajax on sucess upload to add the image dynamically without refreshing browser?
Since you are having option to upload multiple images I would suggest to go with below approach:
your controller now would look like:
[HttpPost]
public ActionResult Create(Photo photo)
{
List<Photo> model = new List<Photo>();
//create list of photo model
foreach (string file in Request.Files)
{
var fileContent = Request.Files[file];
if (fileContent.ContentLength == 0) continue;
var fileName = Guid.NewGuid().ToString();
var extension = System.IO.Path.GetExtension(fileContent.FileName).ToLower();
string thumpath,imagepath = "";
using (var img = System.Drawing.Image.FromStream(fileContent.InputStream))
{
model.Add(new Photo(){
Description=photo.Description,
ThumbPath = String.Format(#"/GalleryImages/thumbs/{0}{1}", fileName, extension),
ImagePath = String.Format(#"/GalleryImages/{0}{1}", fileName, extension),
CreatedOn=DateTime.Now
});
//fill each detail of model here
thumpath = String.Format(#"/GalleryImages/thumbs/{0}{1}", fileName, extension);
//separate variables to send it to SaveToFolder Method
imagepath = String.Format(#"/GalleryImages/{0}{1}", fileName, extension);
SaveToFolder(img, fileName, extension, new Size(200, 200), thumpath);
SaveToFolder(img, fileName, extension, new Size(600, 600), imagepath);
}
}
foreach(var md in model)
{
//loop again for each content in model
db.Photos.Add(md);
db.SaveChanges();
}
return Json(new {model=model },JsonRequestBehavior.AllowGet);
//return the model here
}
in ajax success you can create the image with the model returned values as below:
success: function (result) {
var model = result.model;
$(model).each(function (key,value) {
$('<img />').attr({
src: value.ThumbPath
}).appendTo("body");
//note you can append it to anywhere, like inside container or something
})
}
I would set the src attribute of the img tag usign jQuery in your success function:
success: function (result) {
$("img").attr('src' , '/path/to/your/img');
},
If you don't know the public path to your image on client side you can use the response object:
return Json("{ path : "+model.ImagePath+"."+fileName+"."+extension+"}");
There is a few possibilities, which to use depends on pictures size etc.
Personaly I (if images are not too big) would on server side convert image ot base64 and return it with ajax and display the data returned from server, of course it would need conversion as well.
Check out this article, i think i'll help you :)
Base64 encoded image

Javascript - How can I delete file in file input multiples file?

I've a form that use Jquery Form to make a ajax request upload file to server. It's all good and I've made a function that before user click "upload" button, they can view all the files in the input type = "file" in a table, each row has a delete button to delete this row if you don't want to upload the file in this row.
But I don't know how to really delete the file in javascript this.files array? I've known that this is security error then Javascript cannot change the value of input file.
So, how can I simulate a array of files which user has chosen and delete to post request to server?
Please help me!
NOTE: I've solved the problem by myself, and I want to share for someone who want to have a delete file from input multiples. Please, refer to this link
AJAX/PHP based upload with progress bar for large files
In here, you'll have to use xmlHTTPRequest to post file from the list you want to server. So if user deleted some file name in row, your file array will update too. After all, you update your array to server, each element, each xhr request.
Thanks for anybody.
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Name", fileToUpload.name);
xhr.setRequestHeader("X-File-Size", fileToUpload.size);
xhr.setRequestHeader("X-File-Type", fileToUpload.type);
//xhr.setRequestHeader("Content-Type", "application/octet-stream");
Here is my html
<form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">
<!-- file input not disable it, just hide by position !-->
<input name="FileInput[]" id="FileInput" type="file" multiple style="position: absolute;left: -9999px;"/>
Add Files
<input type="submit" id="submit-btn" value="Upload" style="display:inline;"/>
<img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>
Here is my Javascript
// when change fileinput then get it files name and put to array to check new file or not
$('#FileInput').change(function(e){
if(arrayFiles.length == 0)
{
for (var i = 0; i < this.files.length; i++)
{
// alert(this.files[i].name);
fileNameNew = this.files[i].name;
// Check file is valid
if(checkFileValid(this.files[i]))
{
arrayFiles.push(fileNameNew);
}
}
}
// check if new file is in arrayFiles or not
else
{
// check if file name is same in arrayFiles
for(var i = 0; i < this.files.length; i++)
{
fileNameNew = this.files[i].name;
flag = true;
for(var j=0; j < arrayFiles.length; j++)
{
fileNameOld = arrayFiles[j];
if(fileNameOld == fileNameNew)
{
flag = false;
break; // same file name then not need to push to arrayFiles
}
}
// file is new in arrayFiles
if(flag == true)
{
// fileNameNew is not in arrayFiles so push it to arrayFiles
if(checkFileValid(this.files[i])) // check file name is .hdf
{
arrayFiles.push(fileNameNew);
}
}
}
} // end else check upload new files name
// alert(arrayFiles.length);
// rerender the tbody of table id = "files"
/*
$('#files').find('tbody').append("<tr id='row1'><td>1</td><td>ABC123</td><td><a href='#' name='deleteRow' id='delRow_1'>Delete</a></td></tr><tr id='row2'><td>2</td><td>ABCE1234</td><td><a href='#' name='deleteRow' id='delRow_2'>Delete</a></td></tr><tr id='row3'><td>3</td><td>3242efsdfEWRweR3</td><td><a href='#' name='deleteRow' id='delRow_3'>Delete</a></td></tr>");
*/
tableFilesRender(arrayFiles);
alert($("#FileInput").val(''));
});
// render tbody of table id = "files"
function tableFilesRender(arrayFiles)
{
// clear the table files tbody first
$("#files > tbody").html("");
// iterrate the arrayFiles and write the array row
content = "";
// Row like this: <tr id='row1'><td>1</td><td>ABC123</td><td><a href='#' name='deleteRow' id='delRow_1'>Delete</a></td></tr>
for(var i = 0; i < arrayFiles.length; i++)
{
trStart = "<tr id='row" + i + "'>";
td1 = "<td>" + (i + 1) + "</td>";
td2 = "<td>" + arrayFiles[i] + "</td>";
td3 = "<td><a href='#' name ='deleteRow' id = 'delRow_" + i + "'>Delete</a></td>";
trEnd = "</tr>";
content += trStart + td1 + td2 + td3 + trEnd;
}
// append content to table #files
$('#files').find('tbody').append(content);
}
// Check file is valid type
function checkFileValid(file)
{
fileExtension = file.name.split('.').pop();
if(fileExtension == "hdf")
{
return true;
}
alert(file.name + " không hợp lệ, phải là dạng file HDF .hdf!");
return false;
}
// handle event delete row (created dynamicall), need to get the closet father is #files table and the selector [name='deleteRow']
$("#files").on("click", "[name='deleteRow']", function(event){
deleteID = $(this).attr("id");
temp = deleteID.split("_");
rowID = "row" + temp[1];
// remove the arrayFiles at rowID
arrayFiles.splice(temp[1], 1);
//alert(rowID);
$("#files #" + rowID).remove(); // remove rowID on files table only
//alert(temp[1] + "Link is clicked!");
// delete success then rerender the tables files
tableFilesRender(arrayFiles);
});

Categories