相关疑难解决方法(0)

我想用jQuery异步上传一个文件.这是我的HTML:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

在这里我的__CODE__代码:

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});

我只获取文件名,而不是上传文件.我该怎么做才能解决这个问题？

现行解决方案

我正在使用jQuery Form Plugin上传文件.

注意:

下面的答案和评论反映了2009年遗留浏览器的状态.现在,您可以在2017年使用JavaScript和dataTransfer或FileList对象实际动态/编程地设置文件输入元素的值.

有关详细信息和演示,请参阅此问题中的答案:
如何以编程方式设置文件输入值(即:拖放文件时)？

我该如何设置它的值？

<input type="file" />

我目前正在使用以下代码上传从剪贴板粘贴的图像:

// Turns out getAsFile will return a blob, not a file
var blob = event.clipboardData.items[0].getAsFile(), 
    form = new FormData(),
    request = new XMLHttpRequest();
form.append("blob",blob);
request.open(
            "POST",
            "/upload",
            true
        );
request.send(form);

结果是上传的表单字段,其名称与此类似:Blob157fce71535b4f93ba92ac6053d81e3a

有没有办法设置此或接收此文件名客户端,而不进行任何服务器端通信？

当我使用XMLHttpRequest时,使用正确上传文件FormData.但是,当我切换到时jQuery.ajax,我的代码中断了.

这是工作原始代码:

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "upload.php", true);
    xhr.send(fd);
}

这是我不成功的jQuery.ajax尝试:

function uploadFile(blobFile, fileName) {
    var fd = new FormData();
    fd.append("fileToUpload", blobFile);
    var xm = $.ajax({
        url: "upload.php",
        type: "POST",
        data: fd,
    });
}

我究竟做错了什么？如何使用AJAX正确上传文件？

我有一个具有文件上传字段的表单页面,我试图以编程方式设置该字段的值,虽然我知道由于安全原因它是不可能的,但我想知道我们是否仍然可以？如果有插件或我可以用来执行上传的东西.我有设置该字段所需的文件字段的Base64值,我需要知道的是有没有办法设置它.

在这方面,任何建议或帮助都会很棒.

谢谢.

更新: 添加了一个JsFiddle来演示我正在尝试的内容.

请访问此网站,使用js小提琴中的示例创建一个文本文件,并使用此链接进行转换.

var str = `text`;

http://www.motobit.com/util/base64-decoder-encoder.asp

的jsfiddle

注意:

下面的答案反映了2009年遗留浏览器的状态.现在,您可以在2017年使用JavaScript动态/编程地设置文件输入元素的值.

有关详细信息和演示,请参阅此问题中的答案:
如何以编程方式设置文件输入值(即:拖放文件时)？

我想在网站上添加视频录制功能.我一直在寻找并尝试所有可能的解决方案,但没有任何工作正常.
我试过下面的解决方案

• WebRTC
  我知道使用WebRTC我们可以从网络摄像头和麦克风获取流.我发现了很多关于相同的文章,但没有一个解释了如何从该流中提取blob并保存或上传到服务器.我得到的是获取userMediaStream并通过创建blob对象URL在浏览器中显示它
  

  navigator.getUserMedia  = navigator.getUserMedia ||
                        navigator.webkitGetUserMedia ||
                        navigator.mozGetUserMedia ||
                        navigator.msGetUserMedia;
  
  var video = document.querySelector('video');
  
  if (navigator.getUserMedia) {
    navigator.getUserMedia({audio: true, video: true}, function(stream) {
     video.src = window.URL.createObjectURL(stream);
  }, errorCallback);
  } else {
    video.src = 'somevideo.webm'; // fallback.
  } 
  

  Run Code Online (Sandbox Code Playgroud)

  如何从此流中提取对象,以便保存或上传到服务器？

• RecorRTC
  RecordRTC是由Mauz Khan编写的用于视频/视频录制的库,实际上很好.使用这个库,我能够录制视频和音频,但是有一些问题,如下所示

  • 在chrome中我得到两个Blob对象一个用于音频,一个用于视频,为了生成最终文件,我需要将这些文件合并到最终视频文件中.我FFMPEG用来转换和合并服务器上的文件.
  • 虽然在服务器上转换文件需要很长时间,但它可以很好地使用短视频,但问题是从长录音文件开始.当blob大小超过时Array memory out of exception ,我正在记录更多4 min10 MB

• MediaStreamRecorder
  这是Mauz Khan的另一个库,它在特定的时间间隔后给出记录的blob.我认为这将解决我的内存异常问题.所以我实现如下

  • 在间隔上获取blob块并将其发布到服务器

  • 使用转换小视频文件中的blob块 FFMPEG

  • 最后将所有小文件合并到最终使用FFMPEG完整的视频文件

  • 问题是当小blob块保存到小视频文件中时,似乎文件的起始字节已损坏,因此它在每个小文件的开始时间被挂起,并且在将所有文件合并到最终完成的视频之后,视频会挂起并且在那里每个间隔后'trrrrrr'噪音
  • 视频也开始挂长视频

我现在想用纯javascript录制视频,WebRTC UserMedia API但现在我真的很震惊,因为甚至没有一篇文章解释How to record video …

我正在尝试将录制的文件保存到服务器。为了录音目的，我使用演示录音机

录制结束时，它会给我一个指向录制文件的 blob 链接。所以在谷歌搜索了一下之后，我发现我可以使用那个 bob url 来保存它。
这是讨论保存 blob 的链接。之后我尝试获取它并下载到服务器。

1-我得到了 blob 文件的链接

var data = document.getElementById("save").href

之后，我在 index.html 文件中使用 js 代码将
blob url 发送到 php 代码。
JS代码

<script>
function saveAudio(){
var req = null;
var url = "savefile.php";
var data = document.getElementById("save").href.toString();// document.getElementById("save").innerHTML;// = xhttp.responseText;;   // you have to check how to get the data from your saveAudio() method
window.alert(data);

(window.XMLHttpRequest) ? req = new XMLHttpRequest() : (window.ActiveXObject) ? req = new ActiveXObject("Microsoft.XMLHTTP") : req = false; …

我有这种情况，我通过 ajax 将图像 blob 发送到 CI 控制器，然后上传它。数据发送完美，但只有当服务器尝试上传文件时，它才会失败。我注意到它需要一个带有扩展名的文件类型。由于它没有提供，它失败了。CI 分析器将发布的文件显示为：

Array
(
[name] => blob
[type] => image/png
[tmp_name] => D:xampptmpphpC5EA.tmp
[error] => 0
[size] => 634208
)

虽然它应该是这样的：

Array
(
[name] => featured.jpg
[type] => image/jpeg
[tmp_name] => D:xampptmpphpABDE.tmp
[error] => 0
[size] => 634208
)

我怀疑这是失败的地方。这是我的上传功能代码：

public function upload__image($path, $image){
    $this->output->enable_profiler(TRUE);
    $config['upload_path'] = "./assets/images/$path";
    $config['allowed_types'] = 'png|jpeg|jpg|gif';
    $config['remove_spaces'] = TRUE;
    $config['file_name'] = parent::getGUID();
    $this->load->library('upload', $config);
    $this->upload->initialize($config);

    if (!$this->upload->do_upload("$image"))
    {
        $msg = $this->upload->display_errors('', '');
        return false;
    }
    else
    {
        $data = …