多张图片上传插件

//本例子为六张图片的例子,且不同位置上传的图片不能重复
// 图片上传
var starsNumb;
function starsIdentificationImg(valnum) {
    starsNumb = valnum;
}
accessid = '';
accesskey = '';
host = '';
policyBase64 = '';
signature = '';
callbackbody = '';
filename = '';
key = '';
expire = 0;
g_object_name = '';
g_object_name_type = '';
now = timestamp = Date.parse(new Date()) / 1000;
fname = '';
// starsNumb = 1;
var layer_index_loading;
//实例化一个plupload上传对象
var uploader = new plupload.Uploader({
    browse_button: ['selectfiles1','selectfiles2','selectfiles3','selectfiles4','selectfiles5','selectfiles6'], //触发文件选择对话框的按钮,为那个元素id
    url: 'upload.php', //服务器端的上传页面地址
    flash_swf_url: 'js/Moxie.swf', //swf文件,当需要使用swf方式进行上传时需要配置该参数
    silverlight_xap_url: 'js/Moxie.xap', //silverlight文件,当需要使用silverlight方式进行上传时需要配置该参数
    filters: {
        mime_types: [//只允许上传图片
            {title: "Image files", extensions: "jpg,gif,png,jpeg"}
        ],
        prevent_duplicates: true //不允许选取重复文件
    },
    multi_selection: false,
});
//获取图片路径
var filepath;
uploader.init();
uploader.bind('FilesAdded', function (uploader, files) {

    plupload.each(files, function (file) {

    });
    uploader.start();
});
uploader.bind('UploadProgress', function (uploader, file) {

});
uploader.bind('FileUploaded', function (uploader, file,info) {
    if (info.status == 200){
        $("#selectfiles"+starsNumb).children('img').remove();
        $("#selectfiles"+starsNumb).append("<img src='"+domain + "/" + g_object_name+"' style='width:100%;height:100%'>");
        $("#imgpathurl"+starsNumb).val( domain + "/" + g_object_name);
    }
});
uploader.bind('BeforeUpload', function (uploader, file) {
    ret = get_signature();
    g_object_name = key+'/';
    filetmp = file.name;
    if (filetmp != '') {
        suffix = get_suffix(filetmp)
        calculate_object_name(filetmp)
    }
    new_multipart_params = {
        'key': g_object_name,
        'policy': policyBase64,
        'OSSAccessKeyId': accessid,
        'success_action_status': '200', //让服务端返回200,不然,默认会返回204
        'callback': callbackbody,
        'signature': signature,
    };
    uploader.setOption({
        'url': domain,
        'multipart_params': new_multipart_params
    });

});

//最后给"开始上传"按钮注册事件
function get_signature(){
    //可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲
    now = timestamp = Date.parse(new Date()) / 1000;
    body = send_request();
    var obj = eval("(" + body + ")");
    host = obj['data']['host']
    domain = obj['data']['domain']
    policyBase64 = obj['data']['policy']
    accessid = obj['data']['accessid']
    signature = obj['data']['signature']
    expire = parseInt(obj['data']['expire'])
    callbackbody = obj['data']['callback']
    key = obj['data']['dir']
    fname = obj['data']['fname']
    return true;
}

function calculate_object_name(filename){
    suffix = get_suffix(filename);
    g_object_name += fname + suffix;
    filepath = g_object_name;
    return '';
}
function send_request(){
    var xmlhttp = null;
    if (window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlhttp != null){
        serverUrl = "/index/index/uploads";
        xmlhttp.open("POST", serverUrl, false);
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlhttp.send("types=1&uid=777");
        return xmlhttp.responseText;
    } else{
        alert("Your browser does not support XMLHTTP.");
    }
}
function get_suffix(filename) {
    pos = filename.lastIndexOf('.');
    suffix = '';
    if (pos != -1) {
        suffix = filename.substring(pos)
    }
    return suffix;
};
//记得在使用之前引入js文件:
<script type="text/javascript" src="/plupload.full.min.js"></script>

阅读更多
文章标签: 图片上传插件
个人分类: 图片上传
上一篇laydate日期时间插件实现不用点击确定
下一篇ajax传值使用serialize()
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭