如何使用 jquery 上传文件
how to upload a file using jquery
i have a browse input field without a form.
<div class="bottom_wrapper clearfix">
<div class="message_input_wrapper">
<!--<input placeholder="Type your message here..." class="message_input"><a href="#"><img src="/public/img/camera.png" alt="camera" /></a>!-->
<input type="hidden" name="contactid" id="contactID" value="">
<input class="message_input" id="msg" name="msg" placeholder="Type your message here..." />
<input type="hidden" id="image" value="<%= userid %>">
<div class="image-upload">
<label for="file-input">
<img src="/public/img/camera.png"/>
</label>
<input id="file-input" name="file" type="file"/>
</div>
</div>
<div class="send_message">
<div class="icon"></div>
<input type="submit" name="submit" id="submit" value="Send" onclick="submitFunction(document.getElementById('contactID').value)">
</div>
</div>
当我点击相机图像时,将执行浏览选项。
and here is my function which is i used for simple text posting but i
want to modify it to send file as well.
<script type="text/javascript">
function submitFunction(contactid) {
var image = document.getElementById('image').value;
var msg = document.getElementById('msg').value;
var contactid = document.getElementById('contactID').value;
var data = {};
data.message = msg;
$.ajax({
method: "POST",
url: "/messages/" + contactid,
data: {message: msg}
})
.done(function (msg1) {
$("#msg").val("");
$(".chat_window ul").append('<li class="message right appeared"><div class="avatar"><img src="http://example.com/getUserImage/' + image + '/60"/></div><div class="text_wrapper"><div class="text">' + msg + '</div></div></li>');
});
}
</script>
要使用$.ajax方法上传图片,您需要创建FormData对象。
例如。 var formData = new FormData();
然后将您的图像和其他数据添加到 formData 对象中
formData.append("image",$('input[type=file]')[0].files[0]);
然后将此 formData 作为参数或数据传递给 jquery ajax 方法。
$.ajax({
method: "POST",
url: "/messages/" + contactid,
data: formData,
// THIS MUST BE DONE FOR FILE UPLOADING
contentType: false,
processData: false
})
您需要对要发送的数据进行序列化,因此您可以使用 jQuerys $('form').serialize() 或使用 FormData() 这里是 API docs
所以一个简单的例子是这样的:
<form class="bottom_wrapper clearfix" form id="chatForm" enctype="multipart/form-data" action="/postMessage">
<div class="message_input_wrapper">
<input type="hidden" name="contactid" id="contactID" value="">
<input class="message_input" id="msg" name="msg" placeholder="Type your message here..." />
<input type="hidden" id="image" value="<%= userid %>">
<div class="image-upload">
<label for="file-input">
<img src="/public/img/camera.png"/>
</label>
<input id="file-input" name="file" type="file"/>
</div>
</div>
<div class="send_message">
<div class="icon"></div>
<input type="submit" name="submit" id="submit" value="Send">
</div>
</div>
因此您的输入字段应该包装在一个表单中以将所有表单输入序列化为数据,然后简单地 post 所有消息在一起。
$('#chatForm').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success: function(data) {
// Success handling code
},
error: function(data) {
// Error handling code
}
});
});
然后由您的服务器处理所有部分的消息
我在某处找到了它并且工作正常。可能对你有帮助。
<script type="text/javascript">`$('#submit').on('click', function() {
var file_data = $('#file-input').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
alert(form_data);
$.ajax({
url: 'upload.php', // point to server-side PHP script
dataType: 'text', // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(php_script_response){
alert(php_script_response); // display response from the PHP script, if any
}
});
});
`
和upload.php
<?php
if ( 0 < $_FILES['file']['error'] ) {
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
}
?>
我只是想让@Sachin K 的回答更容易理解。
的确,您必须将 formData 对象设为 post/upload 文件或图像。
首先,创建 formData。
var formData = new FormData();
如果在表单中(您的表单 ID 是 'myForm')
var formData = new FormData($('#myForm')[0]);
其次,将输入文件添加到 formData。
formData.append("image",$('#file')[0]);
* 'file' 是您的输入文件 ID。
如果您的输入文件是表单(myForm),您可以跳过这一步。
最后一个,post 进程。
$.ajax({
url: "input_data.php",
type: "POST",
data : formData,
contentType: false,
cache: false,
processData:false,
success:function(res){
alert('image post succesfully!');
}
});
i have a browse input field without a form.
<div class="bottom_wrapper clearfix">
<div class="message_input_wrapper">
<!--<input placeholder="Type your message here..." class="message_input"><a href="#"><img src="/public/img/camera.png" alt="camera" /></a>!-->
<input type="hidden" name="contactid" id="contactID" value="">
<input class="message_input" id="msg" name="msg" placeholder="Type your message here..." />
<input type="hidden" id="image" value="<%= userid %>">
<div class="image-upload">
<label for="file-input">
<img src="/public/img/camera.png"/>
</label>
<input id="file-input" name="file" type="file"/>
</div>
</div>
<div class="send_message">
<div class="icon"></div>
<input type="submit" name="submit" id="submit" value="Send" onclick="submitFunction(document.getElementById('contactID').value)">
</div>
</div>
当我点击相机图像时,将执行浏览选项
and here is my function which is i used for simple text posting but i want to modify it to send file as well.
<script type="text/javascript">
function submitFunction(contactid) {
var image = document.getElementById('image').value;
var msg = document.getElementById('msg').value;
var contactid = document.getElementById('contactID').value;
var data = {};
data.message = msg;
$.ajax({
method: "POST",
url: "/messages/" + contactid,
data: {message: msg}
})
.done(function (msg1) {
$("#msg").val("");
$(".chat_window ul").append('<li class="message right appeared"><div class="avatar"><img src="http://example.com/getUserImage/' + image + '/60"/></div><div class="text_wrapper"><div class="text">' + msg + '</div></div></li>');
});
}
</script>
要使用$.ajax方法上传图片,您需要创建FormData对象。
例如。 var formData = new FormData();
然后将您的图像和其他数据添加到 formData 对象中
formData.append("image",$('input[type=file]')[0].files[0]);
然后将此 formData 作为参数或数据传递给 jquery ajax 方法。
$.ajax({
method: "POST",
url: "/messages/" + contactid,
data: formData,
// THIS MUST BE DONE FOR FILE UPLOADING
contentType: false,
processData: false
})
您需要对要发送的数据进行序列化,因此您可以使用 jQuerys $('form').serialize() 或使用 FormData() 这里是 API docs
所以一个简单的例子是这样的:
<form class="bottom_wrapper clearfix" form id="chatForm" enctype="multipart/form-data" action="/postMessage">
<div class="message_input_wrapper">
<input type="hidden" name="contactid" id="contactID" value="">
<input class="message_input" id="msg" name="msg" placeholder="Type your message here..." />
<input type="hidden" id="image" value="<%= userid %>">
<div class="image-upload">
<label for="file-input">
<img src="/public/img/camera.png"/>
</label>
<input id="file-input" name="file" type="file"/>
</div>
</div>
<div class="send_message">
<div class="icon"></div>
<input type="submit" name="submit" id="submit" value="Send">
</div>
</div>
因此您的输入字段应该包装在一个表单中以将所有表单输入序列化为数据,然后简单地 post 所有消息在一起。
$('#chatForm').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success: function(data) {
// Success handling code
},
error: function(data) {
// Error handling code
}
});
});
然后由您的服务器处理所有部分的消息
我在某处找到了它并且工作正常。可能对你有帮助。
<script type="text/javascript">`$('#submit').on('click', function() {
var file_data = $('#file-input').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
alert(form_data);
$.ajax({
url: 'upload.php', // point to server-side PHP script
dataType: 'text', // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(php_script_response){
alert(php_script_response); // display response from the PHP script, if any
}
});
}); `
和upload.php
<?php
if ( 0 < $_FILES['file']['error'] ) {
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
}
?>
我只是想让@Sachin K 的回答更容易理解。 的确,您必须将 formData 对象设为 post/upload 文件或图像。
首先,创建 formData。
var formData = new FormData();
如果在表单中(您的表单 ID 是 'myForm')
var formData = new FormData($('#myForm')[0]);
其次,将输入文件添加到 formData。
formData.append("image",$('#file')[0]);
* 'file' 是您的输入文件 ID。
如果您的输入文件是表单(myForm),您可以跳过这一步。
最后一个,post 进程。
$.ajax({
url: "input_data.php",
type: "POST",
data : formData,
contentType: false,
cache: false,
processData:false,
success:function(res){
alert('image post succesfully!');
}
});