i want upload image but its show below error how to solve this problem, because other format of html working fine ..i want use in angularjs
500 (Internal Server Error)
<input type="file" name="file" id="file" onchange="angular.element(this).scope().uploadFile(this.files)"/>
$scope.uploadFile = function(files) {
var fd = new FormData();
fd.append("file", files[0]);
$http.post(http://www.example.com/id/123, fd, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).success(res => {
var data = res.headers.get('application/json');
console.log(data);
}).error(function(err) {
console.log('sss');
});
};
but when i check use below format its working fine but i want response because i need save into database
<form action="http://www.example.com/id/123" method="post" enctype="multipart/form-data">
Upload: <input type="file" name="upload_image"><br/>
<input type="submit" value="submit">
</form>
its working for me.
<form id="data" method="post" enctype="multipart/form-data">
<input type="file" id="file" ng-model="files" name="upload_image">
<input type="submit" value="submit">
</form>
$("form#data").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url:url,
type: 'POST',
data: formData,
async: false,
success: function (response) {
$scope.showimage= response.image_path;
},
cache: false,
contentType: false,
processData: false
});
return false;
});
Related
Actually I'm trying to upload a image on server using ajax jquery?
My Code:-
$(function(){
$('#uploadFile').submit(function(){
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url : 'upload.php',
type : 'POST',
data : formData,
success : function(data) {
console.log(data);
alert(data);
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="uploadFile">
<input type="file" id="file" />
<button type="submit">Submit</button>
</form>
Thankyou for your efforts!
$(function(){
$('#uploadFile').submit(function(){
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url : 'upload.php',
type : 'POST',
data : formData,
contentType: false, // You need to add this
processData: false,// You need to add this also
success : function(data) {
console.log(data);
alert(data);
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="uploadFile">
<input type="file" id="file" />
<button type="submit">Submit</button>
</form>
I am trying to send an image to a server but I always get the following error:
Uncaught TypeError: Cannot read property '0' of undefined
Here is my code:
HTML
<form id="form1">
<input id="image" name="image" type="file"/>
<input id="btnSave" name='btnSave' type="button" value="Save"/>
</form>
JavaScript
$('#btnSave').click(function() {
var fd = new FormData();
fd.append( 'file', $("#image").files[0] );
$.ajax({
url: 'img.php',
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
},
error: function(data){
alert(data);
}
});
}
I have tested similar forms with the same image that I am using to test this code, also I don't want to submit the form yet with this code.
A jQuery object does not have the files collection. You need to access the underlying input element like this:
fd.append('file', $("#image")[0].files[0]);
That said, I'd suggest changing the button to a type="submit" and hooking the handler to the submit event of the form. Then you can just pass the form element to the FormData constructor, like this:
<form id="form1">
<input id="image" name="image" type="file"/>
<input id="btnSave" name='btnSave' type="submit" value="Save"/>
</form>
$('#form1').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'img.php',
data: new FormData(this),
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
},
error: function(data){
alert(data);
}
});
}
<s:file name="excel" id="excel"/>
function saveData(){
vald();
var postData = $("#fname").serializeArray();
$("#fname")[0].reset();
$('<div class="success-tog" >Processing...</div>').prependTo('body').delay(1000);
$.ajax({type: "POST",url: "",data: postData success: sucFunc()});
Script Code
}
You can use formdata to uplaod code or any jquery file upload plugin
https://stackoverflow.com/a/204271/876739
You can see this post https://stackoverflow.com/a/41458116/876739
$(document).on('click', '#upload', function(e) {
e.preventDefault();
var fd = new FormData();
var file = $('#my_file')[0].files[0];
fd.append('file', file);
fd.append('userId', $('#userid').val());
console.log("hi");
$.ajax({
url: 'UploadPic',
data: fd,
type: "POST",
contentType: false,
processData: false,
success: function(dd) {
alert("sucessfully Uploaded")
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="my_file">
<input type="hidden" id="userid" />
<input type="button" id="upload" value="Upload" />
I'm trying to upload an image with ajax like this:
ROUTE
Route::get('upload', 'PostController#addPhoto');
VIEW
<form action="" id="upload" enctype="multipart/form-data">
<input type="file" id="file" name="file">
<input type="hidden" name="_token" value="{{csrf_token()}}" id="token">
Upload
</form>
CONTROLLER
public function addPhoto(Request $request){
$file = $request->file('file');
//dd($file);
return response()->json(['file'=>$file]);
}
JS
function upload(){
var token = $('#token').val();
var route = "http://localhost:8000/upload";
var form = $('#upload')[0];
var formData = new FormData(form);
console.log(form);
$.ajax({
url: route,
headers: {'X-CSRF-TOKEN': token},
type: "GET",
cache: false,
dataType:'json',
processData: false,
contentType: false,
data: {'file': formData},
success:function(data){
console.log(data);
},
});
}
var uploaded = document.querySelector('#submit').onclick= upload;
In my controller dd($file); return null. Please how can i fix this error? how can i get the file image well? Maybe some error in ajax or form? I would like upload file image, thank you for your help!
I am not at all looking for anything fancy. i just want one image from a html file to be selected and on upload should go and sit in the server. I am just not able to make it. I have checked the forum questions and I built up the following code.
HTML Form:
<form id="fileinfo" enctype="multipart/form-data" method="post" name="fileinfo">
<label>Select File</label>
<input type="file" name="file" required="required" />
</form>
<input type="button" id="uploadBTN" value="Upload"/></form>
jQuery:
$(function () {
$('#uploadBTN').on('click', function () {
var formData = new FormData();
formData.append('image', $('input[type=file]')[0].files[0]);
$.ajax({
url: 'upload.aspx',
type: 'POST',
data: formData,
success: function (data) {
$('#output').html(data);
},
cache: false,
contentType: false,
processData: false
});
});
});
In the page_load of upload.aspx, i try to access Request.Files[0].InputStream i get
`System.ArgumentOutOfRangeException`.
Can someone suggest where am i going wrong?