开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Uploadify多上传图片插件

简介:
+关注继续查看

官网demo链接:http://www.uploadify.com/demos/
html:

1
2
3
4
5
6
7
8
9
10
<div class="row cl">
    <label class="form-label col-3"><span class="c-red">*</span>图片:</label>
    <div class="formControls col-5">
        <input id="file_upload" name="file_upload" type="file" multiple="true">
        <div class="preview">
            <ul id="previewImgs"></ul>
        </div>
        <div class="col-4"> </div>
    </div>
</div>

需要引入的js、css:

1
2
3
<link type="text/css" rel="stylesheet" href="/public/uploadify/uploadify.css">
<script type="text/javascript" src="/public/uploadify/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/public/uploadify/jquery.uploadify.min.js"></script>

JS代码处理:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script type="text/javascript">
    $(function() {
        $('#file_upload').uploadify({
            'formData': {
                '<?php echo session_name();?>''<?php echo session_id();?>'
            },
            'uploader'        '{:U("uploads")}'"?session_id=<?php echo session_id(); ?>",
            'swf'             '__PUBLIC__/admin/uploadify/uploadify.swf',
            'auto'            true//是否自动开始上传
            'debug'           false,// 是否开启浏览器调试
            'buttonText'      '请选择图片'// 上传按钮文字
            'fileTypeExts'    :'*.jpg;*.gif;*.bmp;*.png;*.jpeg'//允许的图片类型
            'fileSizeLimit'   '2MB'// 允许的单张图片的自大值
            'multi'           false//是否允许多张图片一起上传
            'uploadLimit'     :6,       //允许上传数量
            'successTimeout'  : 10, //等待服务器响应时间
            'removeTimeout'   : 0.2, //成功显示时间
            'onFallback':function(){
                alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
            },
            'onUploadSuccess' function(file,data,response){
                //alert(data);
                data = $.parseJSON(data);
                var Image = "<div style='display:inline-block'><img src='" + data.thumbpath + "' class='img' style='margin-top:10px;width:150px;height:150px;position: relative;'/>\
                        <input type='hidden' name='image[]' id='image' value='" + data.imgpath + "' />\
                        <a class='del' onclick=goDel(this,'"+data.thumbpath+"')>删除</a></div>";
                if($("a[class=del]").length>=5){
                    alert("暂不支持5条以上!");
                }else{
                    $("#previewImgs").append(Image);
                }
            }
        });
    });
 
    // ajax 删除预览列表中的一张图片
    function goDel(objdom,src){
        $(objdom).parent().remove();
        return false;
    }
</script>

php后台处理图片返回JSON数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public function uploads (){
    $upload new \Think\Upload();
    $upload->exts      =  array('jpg''gif''png''jpeg');
    $upload->rootPath  =  './Uploads/';
    $upload->savePath  =  '/image/commodity/';
    if (!is_dir($upload->savePath)) {
        mkdir($upload->savePath,0777,TRUE);
    }
    $info $upload->upload();
    if(!$info) {
        echo json_encode($upload->getError());
    }else{
        // 上传成功
        $info['Filedata']['savepath'] = str_replace('image''Uploads/image'$info['Filedata']['savepath']);
        $path $info['Filedata']['savepath'] . $info['Filedata']['savename'];
        $image new \Think\Image();
        $image->open('.'.$path);
        $thumbpath '.'.$info['Filedata']['savepath'] . $info['Filedata']['savename'];
        //$image->thumb(148, 84)->save($thumbpath);
        $path = ltrim($path,'.');
        $thumbpath = ltrim($thumbpath,'.');
        $data array(
            'imgpath' =>$path,
            'thumbpath' => $thumbpath
        );
        echo json_encode($data);
    }
}

注意 :  上传图片时session丢失, 只需要修改thinkphp/conf/convention.php中,将VAR_SESSION_ID前面的注释去掉,然后在客户端这样配置下:

'uploader'        : '{:U("uploads")}'+ "?session_id=<?php echo session_id(); ?>",

即可.  

参考链接:  http://m.blog.csdn.net/qq_29845761/article/details/49803427





      本文转自噼里啪啦啦 51CTO博客,原文链接:http://blog.51cto.com/pilipala/1831613,如需转载请自行联系原作者





版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
uploadify 实现文件上传
uploadify官网我们需要到官网上下载需要的插件引入到项目中,同时我们最好看看uploadify的中文文档,当然直接把下面的代码复制作为一个工具类也行,反正都是大同小异.
1230 0
Jquery上传插件Uploadify无刷新上传文件
Uploadify v3.2.1  上传图片并预览 前端JSP: &lt;script type="text/javascript"&gt;                             $(function() {                 $("#upload_org_code").uploadify({                     'height'    
2047 0
【Mongo】uploadify插件帮助实现批量上传
<span style="font-family:楷体; font-family:楷体; font-size:19px; line-height:27px; widows:auto">   <strong>【项目需求】</strong></span> <div style="font-family:楷体; font-size:19px; line-height:27px; widows:
1718 0
jQuery 文件上传插件:uploadify、swfupload
jQuery 文件上传插件:   uploadify、swfupload
1006 0
uploadify插件在IE下的BUG
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chengyi_L/article/details/46415717 项目用到了uploadify插件,在调试IE兼容性的时候,发现包含uploadify插件的页面在刷新的时候总会报js错误。
895 0
21114
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载