php将图片表单提交至七牛云

1.下载最新的php-sdk

下载地址

将Qiniu\examples下upload.php后半部分注释掉,只留下$token变量

index.php中写入

<?php

require_once ‘Qiniu/examples/upload.php‘;

?>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">

    function saveReport() { 

        var form = new FormData(document.getElementById("saveReportForm"));
                 var req = new XMLHttpRequest();

                 req.open("post", "http://up-z2.qiniu.com/", false);
                 req.send(form);

                 if(req.readyState == 4){
                   if (req.status == 200 || req.status == 0){
                        //alert(req.responseText);
                        var obj = JSON.parse(req.responseText);
                        //alert(obj.key);
                        //document.getElementById("file").value = null;
                        //document.getElementById("file").value = "你的七牛云外链默认域名/"+obj.key;
                        document.getElementById("img").value = null;
                        document.getElementById("img").innerHTML = "<img src=\"你的七牛云外链默认域名/"+obj.key+"\">"
            }
        }    

        return false; // 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转
    } 

</script>

<form id="saveReportForm" method="post" action="http://up-z2.qiniu.com/" enctype="multipart/form-data" onsubmit="return saveReport();">

  <input name="token" type="hidden" value="<?=$token?>">
  <input onchange="document.getElementById(‘file‘).value=this.value" name="file" type="file" />
  <input type="submit">
</form>
<div id="img"></div>

没写完待续

时间: 2024-11-04 13:44:11

php将图片表单提交至七牛云的相关文章

基于Http原理实现Android的图片上传和表单提交

版权声明:本文由张坤  原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/794875001483009140 来源:腾云阁 https://www.qcloud.com/community 现在服务器主要是Web居多,客户端一般通过http上传文件到web服务器,最开始的设想很简单,直接将图片转化为字节流,写入到http的outstream,随后发送出去即可. 但当这种方法出现问题,服务器根据文件名这个表单中的字段来判定

php表单提交 图片、音乐、视频、文字,四种类型共同提交到数据库

这个问题一直困扰了我好几天,终于在今天让我给解决了,难以掩饰的激动. 其实在之前没有接触到这种问题,只是表单提交数据而已,再就是图片,四种类型同时提交还真是没遇到过,做了一个系统,其中有一个功能就是提交这四种类型的数据,我只能把这个功能拿到最后来做,就在这几天所有功能都做完了,只剩下了这一个功能,我真的很闹心,这几天睡觉都睡的不踏实,各种的表单提交,做梦也是表单提交,醒来后我在想我的内心原来那么脆弱么,一点压力都承受不住? 事实还好,不管怎么样问题都被解决了 也很感谢博客园的一位哥哥,指点了我,

JavaScript - 表单提交前预览图片属性

即Preview image and its properties before upload 其实这东西网上到处都是,但并不完整. 正好我也遇到了这个问题,不仅仅是预览,还需要得到图片的属性. 于是东凑西凑整理出一个完整的版本,并根据个人的理解加上了一点点说明. (ps:感谢爆栈^^) 首先做一些准备工作,HTML方面主要是img和input标签的id:     <form>         <input type='file' id="imgFile"  />

jquery mobile 表单提交 图片/文件 上传

jquerymobile 下面 form 表单提交 和普通html没区别,最主要是 <form 要加一个 data-ajax='false' 否则 上传会失败 1  html代码 <!doctype html><html><head>    <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8&qu

10天学会phpWeChat——第八天:Form类,丰富表单提交的字段类型

通过前面七讲的系列教程,我们完成了一个包含后台并自适应PC+h5移动端的文章管理模块. 在实际的生产环境中,文章投稿.商品上传等操作并不会简单局限于一个text和textarea组成的表单.在实际中,我们可能会用到web富文本编辑器(如ueditor.markdown).图片上传.多图上传.附件上传.地图标注等更加丰富的表单类型. 今天,我们开始<10天学会phpWeChat>的第八讲:Form类,丰富表单提交的字段类型. 一.什么是Form类? Form类是phpWeChat封装好的一个类,

ajax form表单提交 input file中的文件

ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input file , 不支持ajax上传文件,你肯定会说可以用 ajax form表单上传了呀?不过我后面还要调用上传成功后用js处理一些对话框,所以这种方法排除 2.用了 uploadify 上传插件,弄出来能上传东西,结果不理想:因为不能判断上传的

HTML表单提交总结

http://www.cnblogs.com/shizqiang/p/5984414.html 概述:随着HTML5的兴起,前端越来越多样化,比如表单的提交,现在就有多种方式可以选择,下面总结一下常见的表单提交方式. 1.最基本的表单提交. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单提交示例 - 基本表单提交</title> <

js实现无刷新表单提交文件,将ajax请求转换为form请求方法

最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的问题. 一.无刷新实现form提交文件 将form的target指向为一个iframe就可以实现无刷新提交文件了,但关键是还需要看到后台返回的数据,所以还需要为该iframe注册一个回调函数,因为iframe和该页面在同域内,所以可以在iframe里可以调用该回调函数,就可以看到后台返回的数据了.实

用python模拟登录(解析cookie + 解析html + 表单提交 + 验证码识别 + excel读写 + 发送邮件)

老婆大人每个月都要上一个网站上去查数据,然后做报表. 为了减轻老婆大人的工作压力,所以我决定做个小程序,减轻我老婆的工作量. 准备工作 1.tesseract-ocr 这个工具用来识别验证码,非常好用. ubuntu上安装: sudo apt-get install tesseract-ocr 非常简单. 2.pytesseract和PIL(pillow) pytesseract用来在python中调用tesseract-ocr,PIL(pillow)用来加载图片,安装方法如下: pip3 in