php+ajax+h5实现图片上传功能

2024-04-19 13:39:59

本文实例为大家分享了php实现ajax图片上传的具体代码，供大家参考，具体内容如下

html页面代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="__PUBLIC__/home/js/jquery-1.11.0.js"></script>

</head>
<body>
<form class="form-horizontal" role="form" id="myForm"
   action="/index/fileupsend" method="post"
   enctype="multipart/form-data">

  选择文件:<input type="file" id="file1" /><br />
  <input type="button" id="upload" value="上传" />
  <span id="imgWait"></span>
</form>
<script>
  $(function () {
    $("#upload").click(function () {
      $("#imgWait").html("上传中");
      var formData = new FormData();
      formData.append("myfile", document.getElementById("file1").files[0]);
      $.ajax({
        url: "/Home/index/fileupsend",
        type: "POST",
        data: formData,
        /**
         *必须false才会自动加上正确的Content-Type
         */
        contentType: false,
        /**
         * 必须false才会避开jQuery对 formdata 的默认处理
         * XMLHttpRequest会对 formdata 进行正确的处理
         */
        processData: false,
        success: function (data) {
          if(data){
            alert("上传成功！");
          }
          $("#imgWait").html("上传成功");

        },
        error: function () {
          alert("上传失败！");
          $("#imgWait").hide();
        }
      });
    });
  });
</script>
</body>
</html>

php代码

public function fileupsend(){
  $type_pic = $this->file_upload('1',array('jpg', 'gif', 'png', 'jpeg'),'filetest','myfile');
  echo $type_pic['img_path'];

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

thinkPHP实现的验证码登录功能示例

本文实例讲述了thinkPHP实现的验证码登录功能.分享给大家供大家参考,具体如下: 使用thinkphp自带的验证,实现登录页面的账号密码+验证码的验证 <?php namespace Admin\Controller; use Think\Controller; use Think\Verify; class LoginController extends Controller{ public function login(){ if($_POST){ $obj = new Verify()
php 重写分页器 CLinkPager的实例

php 重写分页器 CLinkPager的实例 1.自定义的分页器类放在哪里? 有两个位置可以放, 第一种是放在 protected/extensions 中,在使用是import进来,或在config文件中import进来: 第二种是放在 protected/components 中,作为组件存在,不需要import 2.用派生方式是最好的 class MyPager extends CLinkPager 入口函数是:public function run() ,当显示分页器时run()被调用
史上最全的PHP正则表达式（手机号需要加上177-***）

首先看下正则表达式思维导图: 一.校验数字的表达式 1 数字: ^[0-9]*$ 2 n位的数字: ^\d{n}$ 3 至少n位的数字: ^\d{n,}$ 4 m-n位的数字: ^\d{m,n}$ 5 零和非零开头的数字: ^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字: ^([1-9][0-9]*)+(.[0-9]{1,2})?$ 7 带1-2位小数的正数或负数: ^(\-)?\d+(\.\d{1,2})?$ 8 正数.负数.和小数: ^(\-|\+)?\d+(\.\
thinkPHP实现上传图片及生成缩略图功能示例

本文实例讲述了thinkPHP实现上传图片及生成缩略图功能.分享给大家供大家参考,具体如下: 记录一下在thinkPHP上传图片的方法(Upload)和生成缩略图(Image)的方法. html页面form中必须加enctype="multipart/form-data" <form action="__SELF__" method="post" enctype="multipart/form-data"> <
PHP实现网站访问量计数器

简单的网站访问量计数器实现,具体如下首先说明思路: 1.用户向服务器发出访问请求 2.服务器读取访问次数文件,+1,向客户端返回 3.服务器保存新的浏览次数 4.新用户访问,重复123即可解决方案(主要算法): 1.数据文件:counter.dat 2.读出数据文件打开文件: 如果不存在,创建,并以0为初识数据: 否则,读出数据: 关闭文件. 3.把累加后的数据写入文件counter.dat 累加数据: 打开文件: 写入数据:
PHP实现找出数组中出现次数超过数组长度一半的数字算法示例

本文实例讲述了PHP实现找出数组中出现次数超过数组长度一半的数字算法.分享给大家供大家参考,具体如下: <?php * 算法要求:数组中有一个数字出现的次数超过了数组长度的一半,找出这个数字. * * 算法分析:我们需要计算数组中每个数字的出现次数.在PHP中我们可以使用in_array函数 * 来判断一个元素是否出现在数组中.比如数组中含有1,2,3三个元素,我们要判断1是否存在 * 可以使用in_array(1,$array)来判断,但是这样只能判断1出现了一次,因为对于含有数组 * 元素1
利用php获得flv视频长度的实例代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: function BigEndian2Int($byte_word, $signed = false) { $int_value = 0; $byte_wordlen = strlen($byte_word); for ($i = 0; $i < $byte_wordlen; $i++) { $int_value += ord($byte_word{$i}) * pow(256, ($byte_wordlen - 1 - $i)); } if
PHP用函数嵌入网站访问量计数器

这是一种方法实现计数器.想看另一种方法的请点击:[PHP]简单的网站访问量计数器实现想看具体代码思路的也请点击上面的链接. 创建Embed-Count文件夹在Embed-Count文件夹下面创建counter.inc.php文件,内容如下: <?php function counter(){ $counter = 0; //初始化变量 $max_len = 8; $lj = explode("/",$_SERVER["PHP_SELF"]); //超全局变
php+ajax+h5实现图片上传功能

本文实例为大家分享了php实现ajax图片上传的具体代码,供大家参考,具体内容如下 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="__PUBLIC__
jQuery插件uploadify实现ajax效果的图片上传

昨天做了一天的ajax效果的图片上传,就是想让自己学的更加的精一些,所以看了很多第三方的控件,最后还是选择了uploadify这个控件,主要原因是比较容易上手. 首先我们先参考别人的资料(我自己整理了一下) 可选项需要参数类型参数名字解释 (布尔型) auto 当文件被添加到队列时,自动上传. (字符串) buttonImg 浏览按钮的背景图片路径. (字符串) buttonText 默认在按钮上显示的文本. (字符串) cancelImg 取消按钮的背景图片路径. (字符串) check
使用express+multer实现node中的图片上传功能

下文给大家介绍使用express+multer实现node中的图片上传功能,具体内容介绍如下所示: 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中在node中使用multer中间件来对上传路由接口进行处理 multer文档 package.json html部分 <body> <div class="form-group"> <label>File input
PHP+jQuery+Ajax实现多图片上传效果

今天我给大家分享的是在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上. HTML 我们在页面上放置一个form表单,使用post提交到后台php处理程序upload.php,注意enctype属性设置要支持文件上传.#preview用来显示上传完毕后的图片.关于css样式设置本文不加说明,请参照下载包的源码. 复制代码代码如下: <form id="imageform" met
java使用CKEditor实现图片上传功能

java如何使用CKEditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的CKEditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预览框中文本内容,并修改hidden属性值为显示上传选项卡删除image.js中包含在双引号中的上述文本将image.js中的hidden属性值改为0 3.修改ckeditor/config.js文件,配置"上传到服务器"按钮调用的controller接口 4."上传到服务器&
iOS实现压缩图片上传功能

本文实例为大家分享了iOS实现压缩图片上传功能,供大家参考,具体内容如下 #pragma mark - 打开相机 -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{ UIImage *image = info[UIImagePickerControllerOriginalImage]; s
微信小程序基于腾讯云对象存储的图片上传功能

在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到保障.所以我们在经过慎重考虑觉得使用第三方的云存储服务. 在最开始的时候我们在腾讯云与阿里云中选择,最终我们选择腾讯云,腾讯云在文件上传用时方面的性能比较突出,文件越大表现越好:在下载用时方面表现略优于阿里云:文件删除用时方面总体速度略逊于,但在不同大小文件删除用时上都比较稳定.当然这与我们主要用于
vue中利用simplemde实现markdown编辑器（增加图片上传功能）

前言最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的不过实际运用的时候发现还是有要完善的地方比如令人头疼的图片上传最终效果安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si
Vue2.0 实现移动端图片上传功能

本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none <input @change="fileChange($event)" type="file" id="upload_file" multiple
详解vue 图片上传功能

这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'> <img :src="item"> </li> <li style="position:relative

php+ajax+h5实现图片上传功能

相关推荐

随机推荐