I am using this following code, where user can upload one or multiple files and can delete those files. All the data is stored in form_data.
Untill now I am not able to make the file upload functionality working.
index.php
<input id="avatar" type="file" name="avatar[]" multiple />
<button id="upload" value="Upload" type="button">upload</button>
<div class="preview">
</div>
<div class="return_php"></div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function () {
var form_data = new FormData();
var number = 0;
/* WHEN YOU UPLOAD ONE OR MULTIPLE FILES */
$(document).on('change', '#avatar', function () {
console.log($("#avatar").prop("files").length);
len_files = $("#avatar").prop("files").length;
for (var i = 0; i < len_files; i++) {
var file_data = $("#avatar").prop("files")[i];
form_data.append(file_data.name, file_data);
number++;
var construc = '<img width="200px" height="200px" src="' +
window.URL.createObjectURL(file_data) + '" alt="' + file_data.name + '" />';
$('.preview').append(construc);
}
});
/* WHEN YOU CLICK ON THE IMG IN ORDER TO DELETE IT */
$(document).on('click', 'img', function () {
var filename = $(this).attr('alt');
var newfilename = filename.replace(/\./gi, "_");
form_data.delete($(this).attr('alt'))
$(this).remove()
});
/* UPLOAD CLICK */
$(document).on("click", "#upload", function () {
$.ajax({
url: "upload.php",
dataType: 'script',
cache: false,
contentType: false,
processData: false,
data: form_data, // Setting the data attribute of ajax with form_data
type: 'post',
success: function (data) {
$('.return_php').html(data);
}
})
})
});
</script>
upload.php
<?php
//upload.php
var_export($_FILES); // this final output that i want to upload
?>
HTML
<div class="col-md-6" align="right">
<label>Select Multiple Files</label>
</div>
<div class="col-md-6">
<input type="file" name="files" id="files" multiple />
</div>
<div style="clear:both"></div>
<br />
<br />
<div id="uploaded_images"></div>
JavaScript
$('#files').change(function(){
var files = $('#files')[0].files;
var error = '';
var form_data = new FormData();
for(var count = 0; count<files.length; count++)
{
var name = files[count].name;
var extension = name.split('.').pop().toLowerCase();
if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1)
{
error += "Invalid " + count + " Image File"
}
else
{
form_data.append("files[]", files[count]);
}
}
if(error == '')
{
$.ajax({
url:"url",
method:"POST",
data:form_data,
contentType:false,
cache:false,
processData:false,
beforeSend:function()
{
$('#uploaded_images').html("<label class='text-success'>Uploading...</label>");
},
success:function(data)
{
$('#uploaded_images').html(data);
$('#files').val('');
}
})
}
else
{
alert(error);
}
});
Not same as your question but you can try like this.
Here is your working code.
There were several problem with your code
Incorrect brace closing in ajax call.
Your name field in form data was invalid
You were requesting form_data as index in the $_FILES array
No use of number variable
index.php
<input id="avatar" type="file" name="avatar[]" multiple="multiple"
/>
<button id="upload" value="Upload" type="button">upload</button>
<div class="preview">
</div>
<div class="return_php"></div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" ></script>
<script>
$(document).ready(function(){
var form_data = new FormData();
/* WHEN YOU UPLOAD ONE OR MULTIPLE FILES */
$(document).on('change','#avatar',function(){
$('.preview').html("");
len_files = $("#avatar").prop("files").length;
for (var i = 0; i < len_files; i++) {
var file_data = $("#avatar").prop("files")[i];
form_data.append("avatar[]", file_data);
var construc = '<img width="200px" height="200px" src="' + window.URL.createObjectURL(file_data) + '" alt="' + file_data.name + '" />';
$('.preview').append(construc);
}
});
/* WHEN YOU CLICK ON THE IMG IN ORDER TO DELETE IT */
$(document).on('click','img',function(){
var filename = $(this).attr('alt');
var newfilename = filename.replace(/\./gi, "_");
form_data.delete($(this).attr('alt'));
$(this).remove();
});
/* UPLOAD CLICK */
$(document).on("click", "#upload", function() {
$.ajax({
url: "upload.php",
dataType: 'image/png',
cache: false,
contentType: false,
processData: false,
data: form_data, // Setting the data attribute of ajax with form_data
type: 'post',
success: function(data) {
//console.log("data")'
}
});
});
});
</script>
upload.php
<?php
//upload.php
$output = '';
if(is_array($_FILES) && !empty($_FILES['avatar']))
{
foreach($_FILES['avatar']['name'] as $key => $filename)
{
$file_name = explode(".", $filename);
$allowed_extension = array("jpg", "jpeg", "png", "gif");
if(in_array($file_name[1], $allowed_extension))
{
$new_name = rand() . '.'. $file_name[1];
$sourcePath = $_FILES["avatar"]["tmp_name"][$key];
$targetPath = "uploads/".$new_name;
move_uploaded_file($sourcePath, $targetPath);
}
}
$images = glob("uploads/*.*");
foreach($images as $image)
{
$output .= '<div class="col-md-1" align="center" ><img src="' . $image .'" width="100px" height="100px" style="margin-top:15px; padding:8px; border:1px solid #ccc;" /></div>';
}
echo $output;
}
?>
Here is my index.html for the code. The following code is showing up in the browser only till the button extent. After that, it's not working the way it should be.
It should load the whole CSV file which is stored in the same folder as index.html and show it in the webpage. I can't identify the issue with it. Need help with this. Thank you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="table-responsive">
<h1 align="center">CSV File to HTML Table</h1><br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div><br />
<div id="employee_table"></div>
</div>
</div>
$(document).ready(function() {
$('#load_data').click(function() {
$.ajax({
url: "FGExport - LEVI.csv",
dataType: "text",
success: function(data) {
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for (var count = 0; count < employee_data.length; count++) {
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for (var cell_count = 0; cell_count < cell_data.length; cell_count++) {
if (count === 0) {
table_data += '<th>' + cell_data[cell_count] + '</th>';
} else {
table_data += '<td>' + cell_data[cell_count] + '</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
I am just wanting to output text from a json file to html, api is here: https://shopify.statuspage.io/api
function setup() {
loadJSON("https://d33g96wd23dd.statuspage.io/api/v2/summary.json", gotData, 'jsonp');
}
function gotData(data) {
var output = document.getElementById('output');
output.innerHTML = data.status + ' ' + data.description;
}
<div class="w3-container w3-center" id="output"></div>
You can use the below code if you want to render the first element of the array
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var output = document.getElementById('output');
$.getJSON( "https://d33g96wd23dd.statuspage.io/api/v2/summary.json", function( data ) {
output.innerHTML = data.components[0].status + ' ' + data.components[0].description;
});
});
</script>
</head>
<body>
<div class="w3-container w3-center" id="output"></div>
</body>
</html>
else , you can loop up your append method alternately .
I have list of URL links on my google app script html page. I have a download button. When I click the download button, I want to download all files from my google drive to my computer using the URL links.
To start with:
I tried for one link to put it in a folder on my google drive. But it doesn't work.
I have shared the spreadsheet file in public domain here https://docs.google.com/spreadsheets/d/1sXWWAdfEIJSj9_QPBjkR6CKhd4bzrYIMa4hImipySWI/edit?usp=sharing
The web link: https://script.google.com/macros/s/AKfycbwkBfuZzSDV5UgQLugJoWXH-2pDrtqsd2Ph5HAkx_oFOvR6gD0/exec
please search for a name "sam"
Would you help me please?
Thank you.
// Start html part
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p>Enter the name: sam </p>
<div>
<form id="searchform">
<input name="nameperson" type="text">
<input type="submit" value="search">
</form>
</div>
<div id="result">
</div>
<div id="download" hidden="true">
<button> download </button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#searchform").submit(function(){
google.script.run.withSuccessHandler(function(valreturn){
var response=JSON.parse(valreturn);
var newHTML=[];
newHTML.push('<table>' + '<tr>' +'<th>'+"Name"+'</th>'+
'<th>'+"URL"+'</th>'+ '<tr>');
for( var i=response.length-1; i >= 0 ; i--){
newHTML.push('<tr>' + '<td>' + response[i].name + '</td>' +
'<td>' + '<a href= " ' + response[i].url + ' " target="_blank" >' + "url" + '</a>' + '</td>' + '</tr>');
}
$("#result").html(newHTML.join(""));
$("#download").show();
}).seachRecord(this);
});
$("#download").click(function() {
alert("how can I download these files ?");
});
});
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
</script>
</body>
</html>
//end html
function getFilepdf() {
var fileURL="https://drive.google.com/file/d/0BybO_Qe9EIRKZExPSWJJXzl1ajQ/view";
var response = UrlFetchApp.fetch(fileURL);
var fileBlob = response.getBlob();
fileuploadpdf(fileBlob);
}
function fileuploadpdf(filedata){
try {
var dropbox = "stackflowfolder";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var blob = filedata;
var file = folder.createFile(blob);
} catch (error) {
return error.toString(); }
}
I am attempting to display recent blog posts from a wordpress blog on my non-wordpress HTML site with Google Feed API.
I managed to display the feed but now I am stuck getting the featured images to display as well. Currently it only displayes the list of the 10 recent "headlines" if you will.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"> </script>
<script type="text/javascript">
google.load("feeds", "1")
</script>
<script type="text/javascript">
var feedUrl = "http://www.harbordev.com/blog/feed/";
var feedContainer=document.getElementById("feedContainer");
$(document).ready(function() {
var feed = new google.feeds.Feed(feedUrl);
feed.setNumEntries(10);
feed.load( function(result) {
list = "<ul>";
if (!result.error){
var posts=result.feed.entries;
for (var i = 0; i < posts.length; i++) {
list+="<li><a href='" + posts[i].link + "'target=_blank'" + "'>" + posts[i].title + "</a></li>";
}
list+="</ul>";
feedContainer.innerHTML = list;
}
else {
feedContainer.innerHTML = "Unable to fetch feed from " + feedUrl;
}
});
});
</script>
</head>
<body>
<section class="section swatch-white">
<div class="container">
<div class="row">
<div class="col-md-12" id="feedContainer">
</div>
</div>
</div>
</section>
</body
How do I show the images as well? On a different entry on here I saw a suggestion like this:
var bmfx = entry.mediaGroups[0].contents[0].thumbnails[0].url;
Should this work, where would I insert it? My Javascript skill is mediocre unfortunately, therefore if someone can point me in the right direction or assist with some code I would greatly appreciate it.
You can see the documentation of the resulting JSON here. The images are in the content field (posts[i].content):
for (var i = 0; i < posts.length; i++) {
list+="<li><a href='" + posts[i].link + "'target=_blank'" + "'>" +
posts[i].title + "</a><p>" + posts[i].content + "</p></li>";
}
If you want to show only the images, you could do that with jQuery
var images = "";
$(posts[i].content).find('img').each(function() {
images += this.outerHTML;
});
And then instead of posts[i].content, append images variable to the list