幻蓝博客 – 孤月蓝风

追寻互联网科技、Unity开发、AR/VR开发、游戏开发、Web前后端开发等技术。

使用Javascript进行图片或视频上传前的预览


最近在做的一个APP转H5微信网站的项目,其中有APP中批量上传图片并预览的功能,之前没有做过类似的,于是研究了一下,并总结分享。

首先推荐使用jQuery File Upload插件来处理上传事件。

首先引入jQuery、jQuery File Upload及其依赖项:

<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="plugins/jquery.ui.widget.js"></script>
<script src="plugins/jquery.iframe-transport.js"></script>
<script src="plugins/jquery.fileupload.js"></script>

HTML内容如下:

<input class="fileinput" name="files[]" id="fileupload" type="file" multiple>
<div class="pics">
    <ul>
        <li id="pic_one" class="pic_one" style="display:none;">
            <img src="images/circle-new/tupian.png" alt="">
        </li>
        <li id="uploadicon" onclick="openFileUpload();">
            <img src="images/circle-new/zhengjia.png" alt="">
        </li>
        <div class="clearboth"></div>
    </ul>
</div>

ul列表中第一项是我们要使用的模板,默认不显示。添加图片后,我们会克隆此节点,修改图片地址,并加入列表。

第二项是我们上传图片的按钮,用来替代input标签的,不过在此示例中,我们直接使用input来上传。

$(function () {
    'use strict';
    // 服务器地址
    var url = 'server/php/';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        add: function (e, data) {
            var f = data.files[0];
            var src = window.URL.createObjectURL(f);
            var node = $("#pic_one").clone(true).show();
            node.children("img").attr("src",src);
            $("#uploadicon").before(node);
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});

我们在fileupload事件中进行处理,add为当使用input选择完图片后的操作,我们先获取选择的文件,之后创建对象URL,你会得到一个blob协议的URL地址,之后便可以克隆模板节点并修改图片地址了,再之后加入ul就可以了。

我们不能使用file协议的URL地址来进行图片预览,因为移动端并不支持。

视频方面,和上面的方法是一致的,只不过视频使用的是video标签,并且当选中视频文件后,需要给video标签添加controls属性,来方便对视频进行预览。

add事件会自动识别选中的文件数量并进行遍历,这都是jQuery File Upload插件带来的便利。

上面的代码中我们只对add事件做了处理,你还可以处理上传完成done事件、上传中progress事件等。


jquery抽奖程序


var runTime;//定时器
var runStart=0;//色块位置
var runSpeed=60;//速度
var tt=1;//曲线运动当前时间
var chouLength=10;//奖品数量
var is_stop = 0;
var run_stop;//定时器2
$(function(){
    $("#chou-btn").click(function(){
        {if $_userid}
        suiji=$.ajax({url:"...",async:false,cache:false});
        suiji=suiji.responseText;
        $("#iframebg").show();
        runRotate(runStart);
        window.setTimeout(stopRotate(suiji),1000);
        check();
        {else}
        alert("您还未登录,请登录后再进行抽奖。");
        {/if}
    })
})

//检查
function check() {
    window.clearInterval(run_stop);
    if (is_stop == 1) {
        check_stop();
    } else {
        run_stop = setInterval(function(){check();},500);
    }
}

//开始旋转
function runRotate(i){
    clearInterval(runTime);
    $("#chou-lumps li").eq(i).addClass("current").siblings().removeClass("current");
    if(runStart<chouLength){
        runStart++;
    }else{
        runStart=0;
    }
    runTime=setInterval(function(){
        runRotate(runStart);
    },runSpeed);
}
//停止旋转
function stopRotate(i){
    clearInterval(runTime);
    var cur=$("#chou-lumps li").index($("#chou-lumps li.current")[0]);
    var index=i-cur+33;
    var next=cur;
    if(next==chouLength){next=0;}
    easeOutQuad(index,next);
}
//减速旋转
function easeOutQuad(index,cur) {
    clearInterval(runTime);
    $("#chou-lumps li").eq(cur).addClass("current").siblings().removeClass("current");
    if(runStart<10){
        runStart++;
    }else{
        runStart=0;
    }
    index--;
    if(index!=0){
        tt++;
        runTime=setInterval(function(){
            easeOutQuad(index,runStart);
        },easeOut(tt,60,120,25));
    }else{
        runSpeed=60;
        tt=1;
        $("#iframebg").hide();
        is_stop=1;
    }
}
//曲线算法,减速值
function easeOut(t,b,c,d){
    return c*(t/=d)*t*t + b;
}
//判断是否停止
function check_stop() {
    var jiangpin = parseInt(suiji) + 1 ;
    alert("您抽到了第" + jiangpin + "个奖品!");
    window.location.href="..."+suiji;
}

javascript动画返回页面顶部


一个返回顶部代码是很有用的,下面代码实现该功能。

<script type="text/javascript">
$(document).ready(function() { 
    $('#active_backtop').click(function(){ 
        $('html').animate({scrollTop:0}, 'slow');          <!--兼容除IE6和Webkit内核浏览器-->
        $(document).scrollTop(0);                          <!--兼容Webkit内核浏览器-->
    })
});
</script>

jQuery选项卡切换


该代码通过jQuery实现了选项卡切换效果,很小巧,效果也很简单,但是一般来用足矣。

<script type="text/javascript">$(document).ready(function(){
        $(".tab_news li").each(function(){
            $(this).mouseover(function(){
                $(".tab").css("display","none");
                id_name = $(this).attr("id");
                id_len = id_name.length;
                id = id_name.substr(id_len-1,1);
                $("#tab"+id).css("display","block");
            });
        });
    });</script>
<div style="width:500px;height:30px;">
    <ul class="tab_news">
        <li id="tab_1">1</li>
        <li id="tab_2">2</li>
        <li id="tab_3">3</li>
    </ul>
</div>
<div class="tab" id="tab1" style="width:500px;height:200px;display:block;">
    111
</div>
<div class="tab" id="tab2" style="width:500px;height:200px;display:none;">
    222
</div>
<div class="tab" id="tab3" style="width:500px;height:200px;display:none;">
    333
</div>