小编mat*_*wka的帖子

我的文件上传有问题.我使用的描述非常方法本文章.我从HERE下载了作者发布的整个脚本.
该应用程序旨在通过HTML5拖放加载文件,然后通过javascript,通过ajax请求将它们发送到服务器端.
一切正常但当我想从AJAX请求头读取参数时会出现问题.这是PHP"文件阅读器"的代码:

$fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);

if ($fn) {
//above there is the upload of the file with file_put_contents function
//which actually works fine when I replace $fn with my own value and ommit the "if" condition

之前,启动XMLHttpRequest.setRequestHeader方法以设置"X_FILENAME"标头.这是javascript:

var xhr = new XMLHttpRequest();

// start upload
xhr.open("POST", $id("upload").action, true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.send(file);

这是证据(来自我Chrome的"萤火虫"的作物):

当我的var_dump的$ FN变量在PHP中返回布尔值FALSE.怎么了？

PS我在Win7 x64上使用XAMPP v1.8.1与Apache 2.4.3和PHP 5.4.7.我在最新的Chrome上运行该网站.您可以猜测该站点正在localhost上运行.我没有更改php.ini文件中的任何内容 - 一切都设置为默认值.

我有一个JavaScript FileReader和/或CSS @ font-face的问题(或者它可能是一个HTML DOM问题 - 不确定).
我正在从桌面拖动一个字体文件并将其放入浏览器的窗口,只需一点点HTML5拖放,然后接收File对象并尝试处理它.
这是执行此操作的JavaScript代码:

//getting the File object
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = function(event) {
    var contents = event.target.result;
    //most important thing here - appending style into HEAD (jQuery)
    $('head').append('<style type="text/css">@font-face { font-family:"myFont";
    src: url("'+contents+'"); }</style>');
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

//read file
reader.readAsDataURL(file);

附加到头部的最终CSS 看起来像这样:

<style type="text/css">
    @font-face {
        font-family: "myFont";
        src: url("data:;base64;Ahs5hD3..."); // …

经过大量的研究后,我还没有找到任何答案.我想用FullScreenAPI实现我的目标,但任何移动浏览器都不支持它(除了Firefox 19和Blackberry浏览器 - 但我需要一个跨浏览器的解决方案).这是源头.我还在本机Android浏览器和移动Chrome上测试了FullScreenAPI,并使用了适当的前缀全屏功能.每个功能都是类型undefined.

另一种方法是rtsp协议,通常由外部玩家处理.这是假设m.youtube.com使用该解决方案的人 - 我认为这不是真的(也许答案已经过时).Youtube使用原生视频的全屏.在点击播放按钮时,在移动Chrome上,电影会立即全屏显示.

虽然,我用Google搜索的每个来源都告诉我在Android浏览器上无法使用原生全屏,但仍然带有原生控件的HTML5视频元素为我们提供了一个全屏按钮,可以完美地运行.

由于我不想要原生控件,任何人都可以共享任何巧妙的解决方案How to trigger HTML5 video fullscreen button'sevent吗？

我在事件中传递给函数的事件对象有问题drop.在我的代码中,div#dropArea它的drop事件由firstDrop函数处理,它执行一些动画,然后调用dropFromDesktop处理e.dataTransfer.files对象的正确函数.我需要在两个单独的函数中使用这种方法,因为后者也被HTML文档中的其他一些div进一步使用(不需要复制代码).第一个只使用一次,隐藏一些"欢迎"文本.

通常,此机制允许您从桌面拖动文件并将其放入我网站上的某个区域.

这是它的外观(在快捷方式中):

function firstDrop(ev) {
    var $this = $(this);

    //when I call the function here, it passes the event with files inside it
    //dropFromDesktop.call($this, ev);

    $this.children('.welcomeText').animate({
        opacity: '0',
        height: '0'
    }, 700, function() {
        $('#raw .menu').first().slideDown('fast', function() {
            //when I call the function here, it passes the event, but 'files' object is empty
            dropFromDesktop.call($this, ev);
        });
    });
}

function dropFromDesktop(ev) {
    var files = ev.originalEvent.dataTransfer.files;
    (...) //handling the files …

我希望有人可以帮助我:我有一个左列容器#left-column,浮点数:左; 和一些浮动在右侧的元素(幻灯片,图像,文本).一切都放在主容器中,宽度值为990px​​; 左列是240px,而右边的所有元素都有宽度,足以适合右侧(720px).这是一个正在发生的事情的图形:

我该怎么做才能解决这个问题？我的猜测是幻灯片div与...有关...

#main-container {
    width:990px;
    margin:8px auto;
}
#left-column {
    width:240px;
    float:left;
}
#slideshow {
    float:right;
    width:720px;
    height:300px;
}
a.image {
    float: right;
    display:inline-block;
}
.text {
    float:right;
    width:720px;
}

我该怎么办 ？非常感谢...!!

编辑 - 当我放置一个位置:asbolute到左列容器,它直接上升到顶部,看起来很好,但这不是我正在寻找的解决方案.

我试图垂直对齐已经旋转了-90deg且没有太多运气的文本.代码如下

HTML:

<section class="page_block" style="background: <?php echo $background; ?>;">
    <div class="row">
        <div class="col-md-1">
            <div id="header">
                <h1 class="verticaltext">
                    <?php echo $page->post_title; ?>
                </h1>
            </div>
        </div>
        <div class="col-md-11">
            <p><?php echo $page->post_content; ?></p>
        </div>
    </div>
</section>

CSS:

.page_block {
    margin:0px;
    padding:10px;
}
#header { 
    position: relative; 
}
.verticaltext {
    transform: rotate(-90deg);
    transform-origin: right, top;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin:right, top;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin:right, top;

    position: absolute; bottom: 0%; left: 0%;
    color: #ed217c;
}

结果是这样的.这是一个Wordpress主题,实现了Twitter Bootstrap以及全宽滑块.我已经确认Bootstrap和Slider都不包含冲突的CSS.