文档章节

PHP不使用flash来实现文件上传,兼容各种浏览器

王克亚
 王克亚
发布于 2015/12/07 13:35
字数 393
阅读 13
收藏 0

直接上代码


前端代码:

<div class="fbpl_top_upload_img">
    <p class="title">上传照片</p>

    <div class="fbpl_center_pad2" id="criticPictures_container">
        <ul class="fbpl_top_upload_img_wrap clearfix" id="pic_container">
            <li class=" fl add_newimg">
                <p class="fileinput-button">添加图片
                    <input name="comment_image_file" id="fileupload" type="file"  multiple>
                </p>
            </li>
        </ul>

        <div class="fbpl_center_bottom">
            <lable><input type="checkbox" name="isAnonymous" id="isAnonymous" value="1"><i>匿名</i></lable>
            <input type="submit" id="btn_submit" class="fabiao" value="发表">
        </div>
    </div>
</div>

<link href="/public/css/jquery.fileupload.css" rel="stylesheet">
<script src="/public/js/fileupload/jquery.ui.widget.js"></script>
<script src="/public/js/fileupload/jquery.iframe-transport.js"></script>
<script src="/public/js/fileupload/load-image.all.min.js"></script>
<script src="/public/js/fileupload/jquery.fileupload.js"></script>
<script src="/public/js/fileupload/jquery.fileupload-process.js"></script>
<script src="/public/js/fileupload/jquery.fileupload-image.js"></script>
<script src="/public/js/jquery.placeholder.min.js"></script>

<script  type="text/javascript">
    /*global window, $ */
    $(function () {
        'use strict';
        // Change this to the location of your server-side upload handler:
        //var url = "{{ upload_url }}?resourceType=comment_image&resourceId=1";
        var url = '/commentUpload';
        $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
           // imageMaxWidth:600,
            //imageMaxHeight:350,
            add: function(e, data) {
                var uploadErrors = [];
                var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
                if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
                    uploadErrors.push('请选择图片格式上传');
                }
                if( data.originalFiles[0]['size'] > 5000000) {
                    uploadErrors.push('你选择的文件大小超过上传限制');
                }
                if(uploadErrors.length > 0) {
                    alert(uploadErrors.join("\n"));
                } else {
                    data.submit();
                }
            },
            done: function (e, data) {
                console.log(data.result);
                if(parseInt(data.result.error) == 0){
                    if($("#pic_container li").size() < 6){
                        $("#pic_container").append(
                                '<li class=" fl img_in">'
                                +'<img style="width:99px;height:99px" src="'+data.result.url+'">'
                                +'<input type="hidden" name="criticPictures[]"  value="'+data.result.url+'" />'
                                +'<div class="close">'
                                +'<img style="cursor: pointer;" src="/public/images/comment/comment_close.png">'
                                +'</div>'
                                +'</li>'
                        );
                    }else{
                        alert("你选择的文件数量超过上传限制");
                        return false;
                    }
               }
            }
        }).prop('disabled', !$.support.fileInput)
                .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
    </script>


后台代码:

$post = array();
$post['resourceType'] ='comment_image';
$post['resourceId'] = 1 ;
$post['getImageInfo'] = 'true' ;
$post['comment_image_file'] = '@'.$_FILES['comment_image_file']['tmp_name'].';filename='.$_FILES['comment_image_file']['name'].';type='.$_FILES['comment_image_file']['type'];


$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,CONFIG::get('api.loupanCommentImageUpload'));
curl_setopt($ch, CURLOPT_POST,true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
curl_exec ($ch);
curl_close ($ch);

使用Curl的方式上传文件

© 著作权归作者所有

共有 人打赏支持
王克亚
粉丝 1
博文 3
码字总数 1598
作品 0
闵行
私信 提问
Flash上传组件--SWFUpload

SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统 <input type="file"/> 标签的文件上传模式。...

匿名
2010/03/03
159.5K
5
文件上传组件--WebUploader

WebUploader 是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,延用原来的FLASH...

缪斯的情人
2014/07/15
18K
12
如何替代即将淘汰的Flash方案?

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由MarsBoy发表于云+社区专栏 | 导语 Web技术飞速发展的如今,我们在感受新技术带来的便捷和喜悦的同时,也时常在考虑着一个问...

腾讯云加社区
2018/10/17
0
0
一些文件上传组件(Flash,JQuery,asp,php,js,AJAX)

FancyUpload FancyUpload是一个采用Flash与Ajax(MooTools)技术实现包含上传进度条的多文件上传组件,类似于SWFUpload。 FancyUpload Mootools jqUploader 结合Javascript与Flash开发,拥有...

老朱教授
2017/10/01
0
0
浏览器上传文件插件--Stream

Stream 是解决不同浏览器上传文件的插件,是Uploadify的Flash版和Html5版的结合!兼容到浏览器从IE7+, Chrome, FF, Safari以及以这些内核为基础到浏览器(如猎豹,搜狗,360,QQ,傲游等)。...

java_speed
2014/04/09
5.8K
3

没有更多内容

加载失败,请刷新页面

加载更多

容器服务

简介 容器服务提供高性能可伸缩的容器应用管理服务,支持用 Docker 和 Kubernetes 进行容器化应用的生命周期管理,提供多种应用发布方式和持续交付能力并支持微服务架构。 产品架构 容器服务...

狼王黄师傅
昨天
3
0
高性能应用缓存设计方案

为什么 不管是刻意或者偶尔看其他大神或者大师在讨论高性能架构时,自己都是认真的去看缓存是怎么用呢?认认真真的看完发现缓存这一块他们说的都是一个WebApp或者服务的缓存结构或者缓存实现...

呼呼南风
昨天
12
0
寻找一种易于理解的一致性算法(扩展版)

摘要 Raft 是一种为了管理复制日志的一致性算法。它提供了和 Paxos 算法相同的功能和性能,但是它的算法结构和 Paxos 不同,使得 Raft 算法更加容易理解并且更容易构建实际的系统。为了提升可...

Tiny熊
昨天
2
0
聊聊GarbageCollectionNotificationInfo

序 本文主要研究一下GarbageCollectionNotificationInfo CompositeData java.management/javax/management/openmbean/CompositeData.java public interface CompositeData { public Co......

go4it
昨天
3
0
阿里云ECS的1M带宽理解

本文就给大家科普下阿里云ECS的固定1M带宽的含义。 “下行带宽”和“上行带宽” 为了更好的理解,需要先给大家解释个词“下行带宽”和“上行带宽”: 下行带宽:粗略的解释就是下载数据的最大...

echojson
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部