-
回答 1 已采纳
<script type="text/javascript">
$(document).ready(function(){
$("#btnUpdate").click(function(){
alert($("#frm_data").serialize());
var formData = new FormData($("#frm_data")[0]);
var Desc= CKEDITOR.instances.editor1.getData();
$("#btnUpdate").attr('value', 'Please Wait...');
$.ajax({
url: 'update_job.php',
data: formData,
cache: false,
contentType:false,
processData:false,
type: 'post',
success: function(response)
{
$("#btnUpdate").attr('value', 'Update');
}
});
return false;
});
})
</script>
i use ckeditor for textarea field. but its can update value with new value, so i want to use another way with send textarea value with form data.
so how to send Desc data with fromData. in ajax.
-
回答 1 已采纳
Is there way to make single var and function in the same time ? If it's possible, how to take the single var #id and then put it into FormData ? The following foo.php looks like:
.
.
.
<input type="hidden" id="id" name="id" value="<?php echo $_GET['id']; ?>" />
<div id="dock" class="dock">Drag & Drop Photos Here</div>
.
.
.
<script type="text/javascript" src="script/tuto-dd-upload-image.js"></script>
tuto-dd-upload-image.js has included:
$(document).ready(function() {
// Add eventhandlers for dragover and prevent the default actions for this event
$('#dock').on('dragover', function(e) {
$(this).attr('class', 'dock_hover'); // If drag over the window, we change the class of the #dock div by "dock_hover"
e.preventDefault();
e.stopPropagation();
});
// Add eventhandlers for dragenter and prevent the default actions for this event
$('#dock').on('dragenter', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('#dock').on('dragleave', function(e) {
$(this).attr('class', 'dock'); // If drag OUT the window, we change the class of the #dock div by "dock" (the original one)
});
// When drop the images
$('#dock').on('drop', function(e){ // drop-handler event
if (e.originalEvent.dataTransfer) {
$('.progress-bar').attr('style', 'width: 0%').attr('aria-valuenow', '0').text('0%'); // Bootstrap progress bar at 0%
if (e.originalEvent.dataTransfer.files.length) { // Check if we have files
e.preventDefault();
e.stopPropagation();
// Launch the upload function
upload(e.originalEvent.dataTransfer.files); // Access the dropped files with e.originalEvent.dataTransfer.files
}
}
});
function upload(files){ // upload function
var fd = new FormData(); // Create a FormData object
for (var i = 0; i < files.length; i++) { // Loop all files
fd.append('file_' + i, files[i]); // Create an append() method, one for each file dropped
}
fd.append('nbr_files', i); // The last append is the number of files
fd.$('#id').val();
$.ajax({ // JQuery Ajax
type: 'POST',
url: 'ajax/tuto-dd-upload-image.php', // URL to the PHP file which will insert new value in the database
data: fd, // We send the data string
processData: false,
contentType: false,
success: function(data) {
$('#result').html(data); // Display images thumbnail as result
$('#dock').attr('class', 'dock'); // #dock div with the "dock" class
$('.progress-bar').attr('style', 'width: 100%').attr('aria-valuenow', '100').text('100%'); // Progress bar at 100% when finish
},
xhrFields: { //
onprogress: function (e) {
if (e.lengthComputable) {
var pourc = e.loaded / e.total * 100;
$('.progress-bar').attr('style', 'width: ' + pourc + '%').attr('aria-valuenow', pourc).text(pourc + '%');
}
}
},
});
}
});
After those both php and js, the data will be sent to tuto-dd-upload-image.php and here's following tuto-dd-upload-image.php code:
.
.
.
$imgType = $_FILES["file_".$i]["type"];
$imgSize = $_FILES["file_".$i]["size"];
$id = $_POST['id'];
echo $imgType;
echo $imgSize;
echo $id;
.
.
.
Unfortunately, at the same time $imgType and imgSize are appeared whereas $id are not appeared. How to tucking #id into FormData ? I think there's something way but limitation of my brain and skill as for jquery and ajax. Thank you.
-
回答 3 已采纳
hello friend i am trying to upload data and files at some time via ajax with this form:
<form id="formarea" class="form-horizontal" name="desk">
<input type="text" class="form-control " name="i_txt_2">
<input type="number" class="form-control " name="i_txt_3" required>
<input type="file" name='i_files_1'>
<input type="file" name='i_files_2'>
<input type="file" name='i_files_3'>
</form>
Ajax:
$('[id^="save"]').on("click", function (event, xhr, settings) {
var id = event.target.id;
var name = $("#formarea").attr("name");
$.ajax({
type:"POST",url:"index.php",data:$("#formarea").serialize()+ '&idprocess=' + id + '&idform=' + name,
error: function(xhr,status,error){console.log(error)},
success: function(response) {
$("#areasmg").html(response);
$("#MsgArea").removeClass("").addClass("alert alert-warning alert-dismissable");
$("#MsgArea").show();
}
});
});
issues:
on request i am not received in server side php serialized of Input File: i_files_1
how can i concatenate the dile to data sent:
data:$("#formarea").serialize()+ '&idprocess=' + id + '&idform=' + name + '&Files' + files[]Serialized ,
UPDATE Problem Solved:
//If you have button to submit Form
$('[id^="BTN-"]').on("click", function (event, xhr, settings) {
var id = event.target.id; //get id buton to filter if you like get control over the button clicked
var req = 0;
$('#formarea *').filter(':input').each(function(){ //filter all requiered input field
if($(this).val() === "" && $(this).attr('required')){req ++;}
});
if(req == 0){
var name = $("#formarea").attr("name"); //get name of form if you like get control over the form submited
//window.WindowsWait();
var input1 = $("<input>").attr("type", "hidden").attr("name", "idprocess").val(id); //Adding field for more controls if you neet handle from PHP
var input2 = $("<input>").attr("type", "hidden").attr("name", "idform").val(name); //Adding field for more controls if you neet handle from PHP
$('#formarea').append($(input1)); //inserting on Html
$('#formarea').append($(input2)); //inserting on Html
event.preventDefault(); //prevent default submit
//get form an serialize data with FormData
var $form = $("#formarea"),
formData = new FormData(),
params = $form.serializeArray();
var inputs = $("input[type=file]");
//Get all Input tipe Files
$.each(inputs, function (obj, v) {
// Prefix the name of uploaded files with "uploadedFiles-"
// Of course, you can change it to any string
var file = v.files[0];
var name = $(v).attr("name");//you can work with the name
formData.append(name, file);
});
// Add all params to the formData
$.each(params, function(i, val) {
formData.append(val.name, val.value);
});
//performing the submit
$.ajax({
url: $form.attr('action'),
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
error: function(xhr,status,error){console.log(error)},
success: function(response) {
alert(response);//print response server
}
});
}else{
alert("Error: You must fill all field, there " + req + " Empty Fields.");//handle Error Empty Fields
}
});
Test:
print_r($_FILES);
-
回答 1 已采纳
我有一个 golang api，用于保存和检索表单中的数据。保存 HTML 表单中填充的数据是没问题的，它可以成功地将数据保存在 mongodb 的数据库中，在检索数据的情况下，它还将根据 html 表单字段中填写的电子邮件检索数据，但是它显示了 ubuntu 终端中的数据。下面是我正在尝试的代码：
Html form index.html file
<form id="form1" method="post">
<input id= "firstname" type="text" name="FirstName" placeholder="Enter your firstname"><br><br>
<input id= "lastname" type="text" name="LastName" placeholder="Enter your lastname"><br><br>
<input id= "email" type="text" name="Email" placeholder="Enter your email"><br><br>
<input id= "mobile" type="text" name="Mobile" placeholder="Enter your mobile"><br><br>
<button id= "button1" class="button" name="button" type="button" value="Submit">Submit</button>
<button id= "button2" class="button" name="button" type="submit" value="Search">Search</button>
</form>
Ajax in index.html is :-
$(document).ready(function(){
//IT will save the data
$('#button1').on('click', function(e){
button=this.value;
console.log(button);
e.preventDefault();
if (button === "Submit") {
var FirstName =$("#firstname").val(),
LastName =$("#lastname").val(),
Email =$("#email").val(),
Mobile =$("#mobile").val();
console.log(FirstName);
$.ajax({
url:"/login",
type:"POST",
data: {'button':button, "first":FirstName, "last":LastName, "email":Email, "mobile":Mobile},
success: function(results) {
console.log(results);
$('#response').html(results);
}
});
}
});
// This will search and I want the result in the success
$('#button2').on('click', function(e){
button=this.value;
console.log(button);
e.preventDefault();
var Email =$("#email").val();
$.ajax({
url:"/get-data",
type: "GET",
data:{'button':button,"email":Email},
success: function(results){
console.log(results)
$('#response').html(results);
}
});
});
});
Main.go file
import (
"fmt"
"gopkg.in/mgo.v2"
"gopkg.in/mgo.v2/bson"
"html/template"
"log"
"net/http"
"encoding/json"
)
type USER struct {
FirstName string `json:"FirstName,omitempty"`
LastName string `json:"LastName,omitempty"`
Email string `json:"Email,omitempty"`
Mobile string `json:"Mobile,omitempty"`
}
func login(w http.ResponseWriter, r *http.Request) {
fmt.Println("method:", r.Method)
if r.Method == "GET" {
t, _ := template.ParseFiles("index.html")
t.Execute(w, nil)
} else {
r.ParseForm()
fmt.Println(r.Form)
if r.Form["button"][0] == "Submit" {
fmt.Println(r.Form)
session, err := mgo.Dial("mongodb://127.0.0.1:27017/user")
if err != nil {
panic(err)
}
defer session.Close()
session.SetMode(mgo.Monotonic, true)
c := session.DB("user").C("profile")
doc := USER{
FirstName: r.Form["first"][0],
LastName: r.Form["last"][0],
Email: r.Form["email"][0],
Mobile: r.Form["mobile"][0],
}
err = c.Insert(doc)
if err != nil {
panic(err)
}
fmt.Println("FistName:", r.Form["first"][0])
fmt.Println("LastName:", r.Form["last"][0])
fmt.Println("Email:", r.Form["email"][0])
fmt.Println("Mobile:", r.Form["mobile"][0])
}
}
}
func AllData(w http.ResponseWriter, r *http.Request){
fmt.Println("method:", r.Method)
if r.Method == "GET" {
r.ParseForm()
fmt.Println(r.Form)
if r.Form["button"][0] == "Search" {
fmt.Println(r.Form)
fmt.Println(r.Form["email"][0])
session, err := mgo.Dial("mongodb://127.0.0.1:27017/user")
if err != nil {
panic(err)
}
defer session.Close()
session.SetMode(mgo.Monotonic, true)
c := session.DB("user").C("profile")
result := Users{}
err = c.Find(bson.M{"email": r.Form["email"][0]}).All(&result)
fmt.Println(result)
b, err := json.MarshalIndent(result, "", " ")
if err != nil {
panic(err)
}
fmt.Printf("%s
", b)
}
}
}
func main() {
http.HandleFunc("/login", login)
http.HandleFunc("/get-data", AllData)
err := http.ListenAndServe(":9090", nil)
if err != nil {
log.Fatal("ListenAndServe: ", err)
}
}
用GET / code 方法请求数据时，我应该做什么，才能让结果成功显示在 ajax 函数中？先提前谢谢你。
-
回答 1 已采纳
Alright so I have a form where you select a CSV file and when you hit the sales_importer button I would like my java to call my php function and get the returned multidimensional array to then do later processing. When I run the following code I get the alert box with a multidimensional array of values but it seems like it is in string form. When I do alert(result[0][0]); I get [ in my alert box.
I have tried changing my dataType in my ajax call to json but then it just fails but I still get a 200 response from my browser. Any suggestions of what might be going on/how to go about fixing it?
js
$('body').on('click', '#sales_importer', function() {
$.ajax({
type: 'POST',
data: new FormData($('form[id="import_form"]')[0]),
cache: false,
contentType: false,
processData: false,
url: admin_url+'Clients/import',
success: function(result){
alert(result);
}
});
});
php
public function import()
{
if ($this->input->is_ajax_request()) {
if (isset($_FILES['client_file_csv']['name']) && $_FILES['client_file_csv']['name'] != '') {
// Get the temp file path
$tmpFilePath = $_FILES['client_file_csv']['tmp_name'];
// Make sure we have a filepath
if (!empty($tmpFilePath) && $tmpFilePath != '') {
// Setup our new file path
$newFilePath = TEMP_FOLDER . $_FILES['client_file_csv']['name'];
if (!file_exists(TEMP_FOLDER)) {
mkdir(TEMP_FOLDER, 777);
}
if (move_uploaded_file($tmpFilePath, $newFilePath)) {
$import_result = true;
$fd = fopen($newFilePath, 'r');
$rows = array();
while ($row = fgetcsv($fd)) {
$rows[] = $row;
}
$data['total_rows_post'] = count($rows);
fclose($fd);
echo json_encode($rows);
}
unlink($newFilePath);
}
}
}
}
-
回答 2 已采纳
I have html form and want send file 'myfile' with Ajax and jQuery:
<form method="post" enctype="multipart/form-data">
<input type="file" name="myfile" id="myfile">
</form>
My javascript code:
function getFile(fieldName){
var itemValue = $('input[name="' + fieldName + '"]')[0].files[0];
return itemValue;
}
function sendFile(){
var formaData = new FormData();
var itemName = 'myfile';
var itemValue = getFile(itemName);
formaData.append(itemName, itemValue);
$.ajax({
type: 'POST',
data: formaData,
processData: false,
contentType: false,
});
}
All works fine when file is choosen. I have in the server $_FILES global array and data in it which got via Ajax:
["myfile"]=>
array(5) {
["name"]=>
string(13) "file_name.jpg"
["type"]=>
string(10) "image/jpeg"
["tmp_name"]=>
string(14) "/tmp/phpefJlk3"
["error"]=>
int(0)
["size"]=>
int(344100)
}
The problem when file is not choosen!
When I don't choose any file and send Ajax request then I have empty $_FILES, but I have $_POST with field 'myfile' equals 'undefined'. But I need 'myfile' field in $_FILES even it is empty. I want something like:
["myfile"]=>
array(5) {
["name"]=>
string(0) ""
["type"]=>
string(0) ""
["tmp_name"]=>
string(0) ""
["error"]=>
int(4)
["size"]=>
int(0)
}
Above is what I have in $_FILES globall array if I send empty form without Ajax. I want the same if I using Ajax. Is it posssible?
-
回答 3 已采纳
I have an ajax formdata
<form id="form" action="index.php?id=upload" method="post" enctype="multipart/form-data">
<input id="files" multiple="true" name="files[]" type="file" />
</form>
I want send this form via dataform sequently.
So I create a loop jn jquery to read each file, So per file I have this:
var data = new FormData();
data.append(file.name, file);
$.ajax({
url: 'index.php?id=upload',
type: 'POST',
contentType: false,
cache: false,
processData:false,
data: data,
fileName:'files',
in php code when I print var_dumb($_FILES) I get this result:
names:"array(1) { ["8_modem_pool_with_small_and_big_jpg"]=>
array(5) { ["name"]=> string(35) "8 modem pool with small
and big.jpg" ["type"]=> string(10) "image/jpeg"
["tmp_name"]=> string(24) "F:\xampp\tmp\php268B.tmp\"
["error"]=> int(0) ["size"]=> int(99790)
}}
how can I get $_FILES value in server side?
I try
if(isset($_FILES["files"]))
{
and
if(isset($_FILES["file"]))
{
but none of them not works.
-------EDIT-------------
thanks for answers. but them are not my answer.
in php when I use
$_FILES["files"]
Iget this error:
Undefined index
But I can print values by this code:
foreach($_FILES as $index => $file) {
move_uploaded_file($file['tmp_name'],$target.$file['name']);
}
I hope you underestand me....
I want something like this:
if(isset($_FILES["files"]))
{
//do action for single file
// do action for array file
}
lastest code works for normal form,But not work for formdata.
-
回答 2 已采纳
I'm struggling to pass a GET variable into a jquery file.
My code is
function upload(files){ // upload function
var fd = new FormData(); // Create a FormData object
for (var i = 0; i < files.length; i++) { // Loop all files
fd.append('file_' + i, files[i]); // Create an append() method, one for each file dropped
}
fd.append('nbr_files', i); // The last append is the number of files
$.ajax({ // JQuery Ajax
type: 'POST',
url: 'ajax/tuto-dd-upload-image.php?order=5', // URL to the PHP file which will insert new value in the database
data: fd, // We send the data string
processData: false,
contentType: false,
success: function(data) {
$('#result').html(data); // Display images thumbnail as result
$('#dock').attr('class', 'dock'); // #dock div with the "dock" class
$('.progress-bar').attr('style', 'width: 100%').attr('aria-valuenow', '100').text('100%'); // Progress bar at 100% when finish
},
xhrFields: { //
onprogress: function (e) {
if (e.lengthComputable) {
var pourc = e.loaded / e.total * 100;
$('.progress-bar').attr('style', 'width: ' + pourc + '%').attr('aria-valuenow', pourc).text(pourc + '%');
}
}
},
});
I need the 5 in url: 'ajax/tuto-dd-upload-image.php?order=5' to be the vatriable order passed through a url like domain.com/?order=XX
-
回答 1 已采纳
I'll start this out by saying this: I'm very new to all of this. I'm really just crashing through everything I can find out. I'm an artist and a writer, I've only really gotten into developing this stuff in the last year.
I'm developing a project that combines a cms, a project manager, and a database front-end (and anything else that my group might want to add). I'm building this out of php, mysql, and javascript. But I'm having trouble getting past setting up the foundation.
I'm trying to test some things out, first and foremost, a mysql query using AJAX to call a php script for the data back-end.
This project has two folders, a private and a public. And everything goes through an index.php bootstrap file. I have a .htaccess mod_rewrite that looks like this:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Rewrite all other URLs to index.php/URL
RewriteRule ^(.*)$ index.php/$1 [PT,L]
</IfModule>
<IfModule !mod_rewrite.c>
ErrorDocument 404 /index.php
</IfModule>
php_value include_path "../private/libs/classes/:../private/config/:../private/config/inc/:../private/libs/smarty/:../private/libs/scripts/:../private/libs/smarty/libs/:../private/libs/smarty/libs/sysplugins/:../private/libs/smarty/libs/plugins/"
I have a bit of javascript here, which is supposed to call the php script showCode.php:
<script>
function showCode(str)
{
if (str=="")
{
document.getElementById("code").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("code").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","showCode.php",false);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("id="+str);
}
</script>
I'm not concerned with my php. I've tested all of the scripts separately and they work fine, my bootstrap file has never given me any trouble either. I have a relatively complex loading system that has always worked perfectly.
I have a serious hunch that it's the .htaccess that's causing me the trouble. the mod_rewrite is probably causing the ajax to not reach the showCode.php file, but for the life of me I cannot find the answer to this.
Any suggestions?
I would love any help, but I am not one to work with jquery... I am really intent on learning the ins and outs of base javascript. Once I'm to a proficient enough point with that, I'll move on to a library.
--EDIT-------------------
Ok, thanks to some of the helpful advice I've gotten here, I've discovered that .htaccess is not my problem. I was figuring that whatever code I brought in through the AJAX function would use my previous PHP setup (the required files I bring in through my bootstrap)... which, upon simply thinking about it, is ridiculous because php runs on the server and the AJAX calls just reload the div on the client. SO... now I have to fix my code accordingly...
--FINAL------------------
Yeah... I needed to include the baseConfig script in my showCode script. Everything works now, with the .htaccess rewrites in place. Thanks for pointing me in the right direction.
-
回答 3 已采纳
I have been searching for almost an hour without finding proper example to fix my problem:
I would like to call a PHP function (it's a simple unlink with the path given from a javascript function that's executed on page load). I am not good at all with AJAX and I would like to understand how to call directly the PHP function, contained in the index.php file, from the javascript code.
Here's what I have in my javascript code snippet:
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dev/templates/absolu/index.php?s=" + Math.random(),true);
//@unlink(listeImages[i].toString());
-
米诺大魔王的博客 元素。 var form = document.getElementById('file-form'); var fileSelect = document.getElementById('file-select');...你计划在你的项目中使用Ajax上传的文件？请在下面的评论中分享你的想法。 -
weixin_39612122的博客 html:js:controller:注意：1controller中接受的参数名和input标签中的name属性需要一样2ssm中的xml需要配置才能使用文件上传，springboot不需要，直接可以使用多文件传输1：public Result Manufacturer... -
等待临界的博客 web中数据提交事件是常常发生的，但是大多数情况下我们不希望使用html中的form表单提交，因为form表单提交会中断当前浏览器的操作并且会调到另一个地址（即使这个地址是当前页面），并且会重复加载一些html浪费带宽... -
尴尬癌患者的博客 用户名：手机号：生日：我们不想使用表单submit的方式添加这个元素，我们就想使用ajax提交。以前我们是这样实现的：123456789101112131415161718192021function addUser(){var user = {uname:$("#uname").val(),... -
洋莞成的博客 $.ajax() data{} 异步请求的写法有很多，这里介绍简单的常见的三种写法，主要是介绍其中的data{}传参写法。第一种写法：拼接URLfunction getFormInfo(){var name='wen';var user='chen';$.ajax({url: "/login/... -
两点人山的博客 我需要使用ajax和FormData发送一些数据,因为我想发送一个文件和一些其他参数.我通常发送数据的方式是这样的：$.ajax({type: 'POST',url: 'some_url',dataType: 'json',processData:false,contentType:false,data:{... -
weixin_33831673的博客 var submit_data = new FormData(); var name = $("#name").val(); let file = $("#file")[0].file[0]; submit_data.append("file", file); submit_data.append("name", name); $.ajax({ url: ... -
backOrigin的博客 场景 ... 由于 隐藏域 信息 太多,所以使用formdata对象直接将 数据打包 发送,这里记录下 使用注意事项function submit_Order() { //读取信息 var hiddenForm = new FormData() //创建FormData对象 -
weixin_39689506的博客 展开全部最近研究了一下ajax，查了一下，向后台传入数据，或者从后台拿32313133353236313431303231363533e4b893e5b19e31333337623536到数据，json语句是比较轻量级的，所以随之也就学了一下json语句：首先采用jquery... -
要争气的博客 一、ajax提交纯表单（不包含文件或二进制或非ASCII数据） ajax提交表单绕了很久，遇到一些问题进行测试下以加深理解，测试使用浏览器 49.0.2623.110 m，HTML使用HTML4标准。下文提到的ajax为原生javascript的...