javascript 使用 Jquery 和 Ajax/Json 上传视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29883928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uploading a video using Jquery and Ajax/Json
提问by Tiny
What do I need to add to my code here to add the ability to upload a video?
我需要在我的代码中添加什么才能添加上传视频的功能？
<div id="title">Upload Videos</div>
<div class="vidUpload">
<form id="vidUpload" enctype="multipart/form-data">
<input name="vidName" type="text" required="required" id="vidName" placeholder="Enter Video Name Here" title="Video Name">
<br>
<textarea name="videoDescription" id="videoDescription" required class="videoDescription" placeholder="Enter Video Description Here" title="Enter Video Description Here"></textarea>
<select name="select" required class="choosevidCat" id="choosevidCat">
<option value="">Choose the Catagory for your Video Here</option>
<?php
$sql = ("SELECT albumId, albumName, albumSelect FROM albums");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($mysqli, $sql);
while($row = mysqli_fetch_array($result)) {
$albumid = ($row['albumId']);
$album_name = ($row['albumName']);
$album_name1 = ($row['albumSelect']);
echo "<option value=".$album_name1. ">$album_name</option>";
}
?>
<option id="createCat" value="createCatagory">Create New Catagory Here</option>
</select>
<input type="file" name="video" id="video">
<input type="button" name="videoToUpload" id="videoToUpload" value="Upload">
</form>
<div id="loader"></div>
<div id="viduploadResult"></div>
jquery
查询
<script type="text/javascript">
$(document).ready(function() {
$("#videoToUpload").click(function() {
var vidName = $("#vidName").val();
var videoDescription = $("#videoDescription").val();
var albumName1 = $("#choosevidCat").val();
var vidFile =$("#video").val();
// Put an animated GIF image insight of content
$("#loader").empty().html('<img src="/images/loader.gif" class="vidloader1"/>');
$.post("includes/vid_upload.inc.php",{vidName: vidName, videoDescription: videoDescription, albumName1: albumName1, vidFile: vidFile}, function(json)
{
if(json.result === "success") {
$("#viduploadResult").html( "The Video "+vidName+" has been Uploaded!");
// // First remove all the existing options
// $('#choosevidCat').empty();
//
// // Load the content:
// $('#choosevidCat').load(location.href + "#choosevidCat > *");
}else{
$("#viduploadResult").html(json.message);
}
});
});
})
</script>
I have spent hours looking at API's like blueimp etc, I just want to upload a video file and put it on my server from the form I have here. Any help would be greatly appreciated
我花了几个小时查看像 blueimp 等的 API，我只想上传一个视频文件并将它从我这里的表单放到我的服务器上。任何帮助将不胜感激
采纳答案by Tiny
After further research I found this script and video tutorial which provided a resolution, so thought I would add it to my own question
经过进一步研究，我发现这个脚本和视频教程提供了一个解决方案，所以我想我会把它添加到我自己的问题中
Web Tutorial https://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
网络教程 https://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
Video Tutorial http://www.youtube.com/watch?v=EraNFJiY0Eg
回答by Muhammmad Hadi Rajani
You are just passing the value of input type file. You should pass the file stream to your server script. Here is a sample code for uploading files using jquery. Note: I am writing only jquery code to submit file. You must have to write server side code (PHP script) to upload the requested file.
您只是传递输入类型文件的值。您应该将文件流传递给您的服务器脚本。这是使用 jquery 上传文件的示例代码。注意：我只编写 jquery 代码来提交文件。您必须编写服务器端代码（PHP 脚本）才能上传请求的文件。
Following code will help you to upload files. Customize it according to your scenario
以下代码将帮助您上传文件。根据您的场景自定义
if($("#video")[0].files.length)
{
this.total_files = $("#video")[0].files.length;
this.start_process = 0;
$.each($("#video")[0].files, function(i,o){
var files = new FormData();
files.append(1, o);
});
$.ajax({
url:"http://example.com",
method:"POST",
contentType:false,
processData: false,
data:files,
async:true,
xhr: function()
{
if(window.XMLHttpRequest)
{ var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
}
}, false);
}
},
success:function(data){
alert("file uploaded..");
}
});
}
