I have a simple HTML page and i would like to upload a file from client machine to server side, here i am trying to upload a file using Kendo UI contorl, but it doesn't work fine, i have given my code details below.
Included JS file is "kendo.all.min.js" and respected CSS files,
Code used for upload,
$("#btnUpload").kendoUpload({
async: {
saveUrl: 'http://localhost:8080/Project1/Cifernet/upload/',
autoUpload: false
},
multiple: true,
localization: {
select: 'Select a file',
uploadSelectedFiles: 'Send',
error: onError
}
});
FYI: i got below error from Mozilla console while uploading a file.
[10:04:33.900] Use of getPreventDefault() is deprecated.
Use defaultPrevented instead. # http://localhost:8080/Project1/Scripts/jquery-1.8.3.js:3255
[10:04:34.193] GET http://localhost:8080/Project1/Styles/textures/highlight.png [HTTP/1.1 404 Not Found 0ms]
--
[10:04:40.506] POST http://localhost:8080/Project1/upload/POST [HTTP/1.1 404 Not Found 0ms]
[10:04:40.507] GET http://localhost:8080/Project1/Styles/Images/loading.gif [HTTP/1.1 404 Not Found 0ms]
[10:04:40.467] "Server response: <html><head><title>Apache Tomcat/6.0.18 - Error report</title><style><!--H1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} H2 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;} H3 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;} BODY {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;} B {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} P {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;}A {color : black;}A.name {color : black;}HR {color : #525D76;}--></style> </head><body><h1>HTTP Status 404 - /Project1/upload/POST</h1><HR size="1" noshade="noshade"><p><b>type</b> Status report</p><p><b>message</b> <u>/Project1/upload/POST</u></p><p><b>description</b> <u>The requested resource (/Project1/upload/POST) is not available.</u></p><HR size="1" noshade="noshade"><h3>Apache Tomcat/6.0.18</h3></body></html>"
[10:04:40.511] GET http://localhost:8080/Project1/Styles/textures/highlight.png [HTTP/1.1 404 Not Found 0ms]
Any one Please help me to resolve this problem or please suggest best jQuery plugin with working example to upload files to the server.
Try this example to illustrate your problem
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div class="configuration">
<span class="infoHead">Information</span>
<p>
The Upload can be used as a drop-in replacement
for file input elements.
</p>
<p>
This "synchronous" mode does not require
special handling on the server.
</p>
</div>
<form method="post" action="submit" style="width:45%">
<div class="demo-section">
<input name="files" id="files" type="file" />
<p>
<input type="submit" value="Submit" class="k-button" />
</p>
</div>
</form>
<script>
$(document).ready(function() {
$("#files").kendoUpload();
});
</script>
</div>
</body>
</html>
There is a good demo on the telerik site:
http://demos.telerik.com/aspnet-mvc/upload/async
The code below is from that demo site.
In razor your GUI code would be:
#(Html.Kendo().Upload()
.Name("files")
.Async(a => a
.Save("Save", "Upload")
.Remove("Remove", "Upload")
.AutoUpload(true)
)
)
and then you would make an Upload controller, the Save method would look like:
public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
{
// The Name of the Upload component is "files"
if (files != null)
{
foreach (var file in files)
{
// Some browsers send file names with full path.
// We are only interested in the file name.
var fileName = Path.GetFileName(file.FileName);
var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
// The files are not actually saved in this demo
// file.SaveAs(physicalPath);
}
}
// Return an empty string to signify success
return Content("");
}
as you can see the ~/App_Data is the path to your file, which I think is what you were after.
Related
I am currently writing the node application using wechat admin platform api. However i am currently stuck when i try to upload the thumb media image file to the tencent server using admin platform api. I have a subscriber account registered with wechat and i am able to get the access token and follower list of my wechat account successfully using admin api platform.
Following is the wechat code i am using to upload to the wechat server :
function uploadThumb(){
console.log('Inside uploadThumb');
var promise = new Promise(function(resolve,reject){
resolve({
then:function(onfullfill,onreject){
fs.readdir(thumb_dir,function(err,files){
if (err){
onreject();
throw err;
}
files.forEach(function(file){
fs.stat(thumb_dir+file, function(err, stats) {
var type = "thumb";
var upload_url = "http://file.api.wechat.com/cgi-bin/media/upload?access_token="+access_token+"&type="+type;
console.log('file name :'+file+': size :'+stats.size);
restler.post(upload_url, {
multipart: true,
data: {
"media['filename']": file,
"media['content type']":"image/png",
"media['file length']": stats.size,
"media['file']": restler.file(thumb_dir+file, null, stats.size, null, "image/png")
}
}).on("complete", function(fdata,response) {
console.log('Status: ' + response.statusCode);
console.log('Thumb image data :'+fdata);
console.dir(response);
//var obj = JSON.parse(fdata);
//saveUploadMediaToDB(obj,file).then(onfullfill());
onfullfill();
});
});
});
});
}
});
});
return promise;
}
When i run the above function in node , i get the HTTP response code as 502. And text/html response below :
Status: 502
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>???</title>
<style type="text/css">
.dn{display:none;}
.db{display:block;}
.dib{display:inline-block;}
.b_dib{display:inline-block;*display:inline;*zoom:1;}
.di{display:inline;}
.vh{visibility:hidden;}
.vv{visibility:visible;}
.rel{position:relative;}
.abs{position:absolute;}
.oh{overflow:hidden;}
.z{*zoom:1;}
.l{float:left;}
.r{float:right;}
.cl{clear:both;}
.group{*zoom:1;}
.group:after{content:"\200B";display:block;height:0;clear:both;}
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}
.tj{text-align:justify;*text-justify:distribute;}
.vt{vertical-align:top;}
.vm{vertical-align:middle;}
.vb{vertical-align:bottom;}
.f0{font-size:0;}
.fa{font-family:Arial;}
.fs{font-family:SimSun;}
.fyh{font-family:"Microsoft YaHei";}
.indent{text-indent:2em;}
.n{font-weight:400;font-style:normal;}
.b{font-weight:700;}
.i{font-style:italic;}
.tdn{text-decoration:none;}
.tdn:hover{text-decoration:none;}
.poi{cursor:pointer;}
.text-hide{line-height:999em;overflow:hidden;}
.drop_hl_extra{padding-left:999em;margin-left:-999em;}
.drop_vb_extra{padding-bottom:999em;margin-bottom:-999em;}
html{-webkit-text-size-adjust:none;}
body,h1,h2,h3,h4,h5,p,ul,ol,dl,dd{margin:0;}
ul,ol{padding-left:0;list-style-type:none;}
a img{border:0;}
body{background-color:#EAEAEA;font-family:"Microsoft YaHei",Helvetica,Verdana,Arial,Tahoma;font-size:14px;color:#222222;}
.logo{padding-top:25px;}
.wrapper{width:960px;margin-left:auto;margin-right:auto;}
.container{margin-top:20px;box-shadow:0 3px 3px #ddd;-moz-box-shadow:0 3px 3px #ddd;-webkit-box-shadow:0 3px 3px #ddd;border-radius:3px;-moz-border-rad
.err_wrapper{overflow:hidden;*zoom:1;padding:100px 260px 100px 260px;}
.err_icon_holder{float:left;}
.err_content{margin-left:180px;margin-top:30px;}
.err_t{font-weight:700;font-size:20px;line-height:30px;}
.err_text{line-height:28px;}
.footer{padding-top:40px;font-size:12px;color:#999999;text-shadow:0 1px 1px #ffffff;text-align:center;}
.page_link a{color:#4d5d2c;text-decoration:none;}
.err_icon{display:inline-block;width:170px;height:130px;background:transparent url("http://res.wx.qq.com/mpres/htmledition/images/icon_page_err.png") n
</style>
</head>
<body>
<div class="header">
<div class="wrapper">
<h1 class="logo"><img src="http://res.wx.qq.com/mpres/htmledition/images/login/logo.png" alt="??????"></h1>
</div>
</div>
<div class="main">
<div class="wrapper">
<div class="container">
<div class="err_wrapper">
<span class="err_icon_holder"><i class="err_icon page_503"></i></span>
<div class="err_content">
<h3 class="err_t">503 : HTTP Error 503</h3>
<p class="err_text">???????,????????</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="wrapper">
<p class="page_link">
<a target="_blank" href="http://www.tencent.com/zh-cn/index.shtml">????</a>
|
<a target="_blank" href="http://mp.weixin.qq.com/cgi-bin/readtemplate?t=wxm-agreement&type=info&lang=zh_CN">????</a>
|
<a target="_blank" href="http://kf.qq.com/special_auto/weixin.html">????</a>
</p>
<p class="copyright">
Copyright c 2012-2013 Tencent. All Rights Reserved.
</p>
</div>
</div>
</body>
</html>
Please help me by pointing in correct direction , whether this approach is correct or am i doing something basically wronge.
Based on what I've been able to find in the Restler documentation, and comparing it with the WeChat API documentation, it seems like you might be specifying the incorrect request parameter.
I think you might need to replace
restler.post(upload_url, {
multipart: true,
data: {
"media['filename']": file,
"media['content type']":"image/png",
"media['file length']": stats.size,
"media['file']": restler.file(thumb_dir+file, null, stats.size, null, "image/png")
}
[...]
With something along these lines:
restler.post(upload_url, {
multipart: true,
data: {
"media": restler.file(thumb_dir+file, null, stats.size, null, "image/png")
}
[...]
The links on my page don't work after uploading a large file using AJAX. They result in the infamous error "The requested URL was rejected. If you think this is an error, please contact the webmaster. Your support ID is..." (i.e. the file upload is successful, but links subsequently fail.)
I get this behaviour after uploading a large (19 MB) file, but not after uploading a small (100 K) file, and not after uploading no file. If I "Clear cookies for domain", it restores the expected behaviour. (The offending cookie might be called "TS0194eee0_0".)
The errant behaviour is the same in IE 11, FireFox 40.0, and BlackBerry browsers.
What am I doing wrong? Does something persist after the AJAX call is finished that I should be clearing? (I really don't want to do a "delete cookie" hack.) JQuery is not an option. My site is serviced in a "shared host" environment, so access to php.ini is out of the question.
upload1.html:
<!DOCTYPE html>
<html>
<head>
<script>
function startUpload()
{
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function()
{
if (ajax.readyState == 4 && ajax.status == 200)
{alert (ajax.responseText);}
};
ajax.open("POST", "/test/upload2.php");
ajax.send(new FormData(document.getElementById("form1")));
}
</script>
</head>
<body>
Absolute link<br />
Site relative link<br />
Document relative link<br />
<form id="form1" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1" /><br>
<input type="button" value="Start Upload" onclick="startUpload()" />
</form>
</body>
</html>
upload2.php:
<?php echo "Hello World!"; ?>
Update: As I suspected, deleting (expiring) the offending cookie solved the problem "for now", but for how long? I have no idea why cookie "TS0194eee0_0" is related to the problem, or if it will always have that name.
document.cookie = "TS0194eee0_0=; expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/";
Is there a way to upload file using pure prototype and ajax. I've searched for it on google but did't got any satisfactory result. Can anyone please help me out??
The easiest way to get an "Ajax" file upload to work is to use a keyhole iframe as the target for your form:
<form action="handler/url" enctype="multipart/form-data" target="keyhole" method="post">
<input type="file" multiple name="user_file[]" />
<input type="submit" id="upload" value="Upload">
</form>
<!-- style the following to be tiny/hidden -->
<iframe id="keyhole" src="about:blank"></iframe>
The trick with this is to show a waiting indicator, and hide it after the upload is complete.
<div id="waiting" style="display:none"></div>
<script type="text/javascript">
$('upload').observe('click', function(evt){
$('waiting').show();
});
</script>
In your file upload handler, return a text/javascript header and the following script after a successful upload:
var waiting = top.document.getElementById('waiting');
if(waiting) waiting.style.display = 'none';
Naturally, this will only work if both endpoints are on the same server, owing to Same Origin Policy.
I made a simple example showing the problem: the form below submits to another page using jQuery .post().
Form
$('form').submit(function(){
$.post(
$(this).attr('action'),
$(this).serialize(),
function(data) {
var ret = data;
var final_data = $(ret).find('#holder-1').html();
alert(final_data);
}
)
return false;
})
Action
<div id="holder-1">
<h1>Content 1</h1>
</div>
<div id="holder-2">
<h1>Content 2</h1>
</div>
<div id="holder-3">
<h1>Content 3</h1>
</div>
The log shows that the content of data looks fine. But once i try to find #holder-1 with .find(), it returns undefined.
This is almost the same as the last example in the jQuery api page: http://api.jquery.com/jQuery.post/
Here is the full (not) working example hosted in my website, with some console.log() along the code:
Form: http://www.peixelaranja.com.br/tmp/post.php
I tried nearly anything: passing the dataType as 4th parameter, using $.ajax() instead of .post(), using .filter() instead of .find(), different versions of jQuery... Nothing seems to work.
All the files are UTF-8.
Any ideas?
I know you mentioned that you used filter instead of find, however, that should work. jQuery is stripping out the html, head,body tags, etc. Once this is done, #holder-1 is now at the top level of the hierarchy.
This fiddle demonstrates that filter does work:
http://jsfiddle.net/68jEt/
var html = '<!doctype html><html dir="ltr" lang="pt-BR"><head> <meta charset="UTF-8"> <title>Return Test</title></head><body> <div id="holder-1"> <h1>Content 1</h1> </div> <div id="holder-2"> <h1>Content 2</h1> </div> <div id="holder-3"> <h1>Content 3</h1> </div></body></html>';
alert($(html).filter("#holder-1").html());
I'm looking for a way to check if a link exists on a certain page. I know that this is possible with a ping, but I really don't know how to do this.
What I have is a list of links to other webpages, they should have a backlink to my page also. I want to check this, when the backlink is there, a text should appear, something like "ok" and when the result is negative, something like "no backlink"
I know the urls of the pages where my link should appear, in case you need to know that.
Any help would be great!
I have found a piece of code wich I think could be used to serve my needs. I self don't know how, but it would be great if anyone can help me with this.
This is the code:
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
var ajax = new XMLHttpRequest();
function pingSite() {
ajax.onreadystatechange = stateChanged;
ajax.open('GET', document.getElementById('siteToCheck').value, true);
ajax.send(null);
}
function stateChanged() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
document.getElementById('statusLabel').innerHTML = "Success!";
}
else {
document.getElementById('statusLabel').innerHTML = "Failure!";
}
}
}
-->
</script>
</head>
<body>
Site To Check:<br />
<input type="text" id="siteToCheck" /><input type="button" onclick="javascript:pingSite()" />
<p>
<span id="statusLabel"></span>
</p>
</body>
You can't natively use Javascript to parse external domains, I used a proxy page which sniffs the content and feeds it to the ajax callback.
My solution basically grabs the source of the site to check and sees if a string, which can be your site link matches. I would assume this should be sufficient rather than trying to parse and look for anchors, but you can be as thorough as you want ( parse the whole thing as a DOM element and look for href attribute value ).
Let me know if you run into any issues.
<?php
$query = isset($_POST['submitted']) ? true : false;
if ( $query ) {
$url = #file_get_contents( $_POST['site-url'] );
if ( $url && strlen( $url ) > 0 ) {
$checkFor = $_POST['check-for'];
$match = preg_match( '/' . $checkFor . '/', $url );
echo $match ? 'string (link) is found' : 'string not found';
} else {
echo 'could not connect to site..';
}
exit;
}
?>
<form action="" id="site-checker">
<div class="field">
<label for="site-url">Site to check:</label>
<input id="site-url" name="site-url" value="http://jquery.com">
</div>
<div class="field">
<label for="check-for">Check for:</label>
<input id="check-for" name="check-for" value="docs.jquery.com">
</div>
<input type="hidden" name="submitted" value="true">
<input type="submit">
</form>
<div id="result"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$('#site-checker').submit(function(e) {
e.preventDefault();
$.ajax({
url:'check.php',
type:'POST',
data:$('#site-checker').serialize(),
success:function(html) {
$('#result').html( html );
}
});
});
</script>
IMHO it would be better to perform this task in a server side script. Depending on your platform there might be functions for sending HTTP requests and HTML parsing which is what you need here. Javascript has cross domain restrictions which will prevent you from sending ajax requests to different domains than the one that is hosting the web page.