I'm trying to test the Cloudinary Uploader (via jquery and PHP).
I follow the instructions there:
http://cloudinary.com/documentation/php_image_upload#direct_uploading_from_the_browser
I'm interested to make it work as browser uploading (not server side).
My final HTML/script text is the following (I put some XXXX).
<html>
<head>
<title></title>
<script src="js/jquery-3.1.1.min.js"></script>
<script src='js/jquery.ui.widget.js' type='text/javascript'></script>
<script src='js/jquery.iframe-transport.js' type='text/javascript'></script>
<script src='js/jquery.fileupload.js' type='text/javascript'></script>
<script src='js/jquery.cloudinary.js' type='text/javascript'></script>
</head>
<body>
<script type='text/javascript'>
$.cloudinary.config({"api_key":"XXXXX","cloud_name":"XXXXX"});
</script>
<form action="uploaded.php" method="post">
<input class='cloudinary-fileupload' data-cloudinary-field='image_id' data-form-data='{"timestamp":1477780986,"callback":"http:\/\/www.XXXXX.XXX\/cloudinary\/cloudinary_cors.html","signature":"96872da4909f6acf00537c78ca41414ea73bXXXXX","api_key":"538456726987XXX"}' data-url='https://api.cloudinary.com/v1_1/di2a8qkzv/auto/upload' name='file' type='file'/> <input type="hidden" name="image_id" id="image_id" />
</form>
</body>
</html>
I just click the "Browse..." button and select a file, but nothing happens.
I have also the Firefox Console ON, but also I don't see any action.
As I understand, the form should automatically submit after the selection of the file. Right?
If not, what exact should I do to submit the file to Cloudinary?
What escapes me?
You have to initialize the input field as well. Try adding your code the following:
$('.cloudinary-fileupload').cloudinary_fileupload();
Make sure that this line is loaded last, so either put it at the end of the HTML or put it in a $( document ).ready() block.
On file input append this:
onchange="this.form.submit();"
Change this line of code:
<form action="uploaded.php" method="post">
<input class='cloudinary-fileupload' data-cloudinary-field='image_id' data-form-data='{"timestamp":1477780986,"callback":"http:\/\/www.XXXXX.XXX\/cloudinary\/cloudinary_cors.html","signature":"96872da4909f6acf00537c78ca41414ea73bXXXXX","api_key":"538456726987XXX"}' data-url='https://api.cloudinary.com/v1_1/di2a8qkzv/auto/upload' name='file' type='file'/> <input type="hidden" name="image_id" id="image_id" />
</form>
to:
<form action="uploaded.php" method="post">
<input onchange="this.form.submit();" class='cloudinary-fileupload' data-cloudinary-field='image_id' data-form-data='{"timestamp":1477780986,"callback":"http:\/\/www.XXXXX.XXX\/cloudinary\/cloudinary_cors.html","signature":"96872da4909f6acf00537c78ca41414ea73bXXXXX","api_key":"538456726987XXX"}' data-url='https://api.cloudinary.com/v1_1/di2a8qkzv/auto/upload' name='file' type='file'/> <input type="hidden" name="image_id" id="image_id" />
</form>
Related
I recently started a project that was going to download some data from a certain site. Unfortunately, when I wanted to download html with r.text, I got this code instead of the code I expected:
<html>
<head>
<title>Working...</title>
</head>
<body>
<form method="POST" name="hiddenform" action="some link"><input type="hidden" name="wa" value="wsignin1.0" /><input type="hidden" name="wresult" value="some links tokens and certificates" /><input type="hidden" name="wctx" value="some link" /><noscript><p>Script is disabled. Click Submit to continue.</p><input type="submit" value="Submit" /></noscript></form>
<script language="javascript">
window.setTimeout('document.forms[0].submit()', 0);
</script>
</body>
</html>
When I open this html code in webbrowser it redirects me to a certain site.
Can I send request with python requests module that will work just like that ?
If I did not explain something enough, I would be grateful to write it in a comment.
I have downloaded jquery-validation-1.14.0.zip file from web. And know I am trying to use it in my project, but the problem with me is i don't know exactly where to place the folder(extracted file) in my wamp folder, and what are the changes to be made on any of the config or .htaccess file. As i have given all my complete 3-4 days to configure it by my own, but finally left with no options and i am posting my question here so that anyone here can help me out.
basically here is my
folder sructure;-
C:\wamp\www\developer\jquery-validation
controller:-
C:\wamp\www\developer\application\controllers
How do i use to call the script file in my view:-
<html>
<head>
<script type="text/javascript" src ="../jquery-validation/lib/jquery.js"> </script>
<script type="text/javascript" src ="../jquery-validation/dist/jquery.validate.js"> </script>
</head>
And another thing that i would like to emphasis here is, in eclipse-mars, i have included jquery library too. And now i have jquery 2.0 library inside Javascript Resources.
After doing all these when i simply try to use alert function, i got to see lots of errors.
Errors:-
GET
http://localhost/developer/index.php/jquery-validation/lib/jquery.js [HTTP/1.1 404 Not Found 27ms]
GET
http://localhost/developer/index.php/jquery-validation/dist/jquery.validate.js [HTTP/1.1 404 Not Found 30ms]
ReferenceError: $ is not defined
Please get me rid of all these anyhow.. Now i'm totally frustrated..
Very Very Thanks in advance..
the problem remains the same #praveen and # ichadhr. For more clarification of my code, here is a simple view:
<html>
<head>
<script type="text/javascript" src ="<?php echo base_url('jquery-validation/lib/jquery.js');?>" ></script>
<script type="text/javascript" src ="<?php echo base_url('jquery-validation/dist/jquery.validate.js');?>"></script>
</head>
<body>
<form method="post" id="myform">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<button type="submit" class="btn btn-default" id="sub">Submit</button>
</form>
<script>
$("#sub").click(function(){
alert("hello");
$("#myform").valid();
});
</script>
</body>
</html>
And my base url is localhost/developer
and the folder and file locations for js file are as in my code.
Errors are still same
All included assets bind with
base_url('path/to/script.js');
And all links generate with
site_url('controller/action/param');
After Seeing your new description assuming files are in your views folder inside application So the becomes :-
<html>
<head>
<script type="text/javascript" src ="<?php echo base_url('jquery-validation/lib/jquery.js');?>" ></script>
<script type="text/javascript" src ="<?php echo base_url('jquery-validation/dist/jquery.validate.js');?>"></script>
</head>
<body>
<form method="post" id="myform">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<button type="submit" class="btn btn-default" id="sub">Submit</button>
</form>
<script>
jQuery(document).ready(function($){
$("#sub").click(function(){
alert("hello");
});
});
</script>
</body>
</html>
This code run but the image was not display
why the image was not display
<html>
<head>
<title> img bit</title>
</head>
<body>
<form action="backend.php" method="POST" enctype="multipart/form-data">
<input type="file" name="file"/>
<br />
<input type="submit"/>
</form>
</body>
</html>
This has nothing to do with encryption. enctype refers to encoding, not encryption. The distinction between encryption and encoding is very important!
enctype="multipart/form-data" is what I've used on the <form> tag in every functioning file upload system I've ever written.
What does backend.php do? That's almost certainly where your problem lies if your files aren't uploading.
I am using jQuery Form to post data. I am sending some response from the server that I want present in the div specified with the target option. I can see in firebug that the response is actually returned to the browser but the information is not turning up in the specified div.
I'm also using jQuery Multifiles in order to be able to upload more than one file. This part works fine and I can upload several files and those are presented on the server.
This is my own smicadminjavascripts.js
$(document).ready(function() {
$('#newticketform').bind('submit', function(e) {
e.preventDefault(); // <-- important
$(this).ajaxSubmit({
target: '#output'
});
});
});
my .html:
<html>
<head>
<script language='javascript' type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script language='javascript' type='text/javascript' src='jquery.MultiFile.js'></script>
<script language='javascript' type='text/javascript' src='jquery.form.js'></script>
<script language='javascript' type='text/javascript' src='smicadminjavascripts.js'></script>
<head>
<body>
<form id='newticketform' enctype='multipart/form-data'method='POST'>
<input type='hidden' name='MAX_FILE_SIZE' value='1000000' />
<label for='title'>Rubrik</label> <input type='text' id='title' name='title'/><br/><br/>
<label for='description'>Beskrivning</label> <textarea rows='15' cols='50' id='description' name='description'></textarea><br/>
<!-- The file element -- NOTE: it has an ID -->
<input class='multi' id='my_file_element' type='file' name='file[]' maxlength='5' >
<div id='files_list'></div>
<input type='submit' name='upload' value='Upload' />
</form>
<div id='output'></div>
</body>
</html>
What is my problem and how do I fix it?
Thanks!
I downloaded the jquery.form again (http://malsup.github.com/jquery.form.js) and replaced the it.
Still it didn't work. The problem was that the file wasn't downloaded to the development server again (using NetBeans/ftp). I had to check the box again in order to get it downloaded.
Now it works. Don't really know what the actuall problem was.
I am using jQuery form plugin to submit my form. It has a file element and when I am submitting it I am getting "too much recursion" in Firefox. It looks fine in IE 8. It works fine if I submit the form without selecting any file. Any idea?
I am calling ajaxForm() method this way.
jQuery("#myForm").ajaxForm();
Code Looks like below:
HTML Form:
<form action="someaction.do" method="post" enctype="multipart/form-data" id="myForm">
To : <input type="text" value="" name="subject"/>
Attachment : <input type="file" value="" name="attachement"/>
<input type="submit" value="Send"/>
</form>
Loading the following scripts
<script language="javascript" type="text/javascript" src="../js/jquery/jquery-1.6.js"> </script>
<script language="javascript" type="text/javascript" src="../js/jquery/jquery.form.js"></script>
While form is submitting ,
jQuery("#myForm").ajaxForm()