内容简介:HTML:<input type="file" id="changeImg" value="更換圖片" style="position:absolute;left:0px;top:0px;opacity:0;display:block;width:100%;height:100%;" name="pic">ajax:
HTML:
<input type="file" id="changeImg" value="更換圖片" style="position:absolute;left:0px;top:0px;opacity:0;display:block;width:100%;height:100%;" name="pic">
ajax:
$("#changeImg").change(function () {
var data = new FormData(); //为FormData对象添加数据 $.each($('#changeImg')[0].files, function(i, file) { data.append('upload_file'+i, file); }); console.log(data); //$(".loading").show(); //显示加载图片 //发送数据 $.ajax({ url:url, type:'POST', /*提交方式*/ data:data, cache: false, contentType: false, /*不可缺*/ processData: false, /*不可缺*/ success:function(data){ //data = $(data).html(); /*转格式*/ $(".img2").attr("src",data); console.log(data); console.log(1); }, error:function(){ alert('上传出错'); } }); })
PHP:
<?php
header('content-type:text/html charset:utf-8');
$dir_base = $_SERVER['DOCUMENT_ROOT']; //文件上传根目录
//没有成功上传文件,报错并退出。
$output = "<textarea>";
$index = 0; //$_FILES 以文件name为数组下标,不适用foreach($_FILES as $index=>$file)
foreach($_FILES as $file){
$upload_file_name = 'upload_file' . $index; //对应index.html FomData中的文件命名 $filename = $_FILES[$upload_file_name]['name']; $gb_filename = md5(time().rand(1,9999)); //名字转换成gb2312处理 //文件不存在才上传 if(!file_exists($dir_base.$gb_filename)) { $isMoved = false; //默认上传失败 $isMoved = @move_uploaded_file ( $_FILES[$upload_file_name]['tmp_name'], $dir_base.$gb_filename.$filename); /*$MAXIMUM_FILESIZE = 1 * 1024 * 1024; //文件大小限制 1M = 1 * 1024 * 1024 B; $rEFileTypes = "/^\.(jpg|jpeg|gif|png){1}$/i"; if ($_FILES[$upload_file_name]['size'] <= $MAXIMUM_FILESIZE && preg_match($rEFileTypes, strrchr($gb_filename, '.'))) { $isMoved = @move_uploaded_file ( $_FILES[$upload_file_name]['tmp_name'], $dir_base.$gb_filename); //上传文件 }*/ }else{ $isMoved = true; //已存在文件设置为上传成功 } if($isMoved){ //输出图片文件<img>标签 //注:在一些系统src可能需要urlencode处理,发现图片无法显示, //请尝试 urlencode($gb_filename) 或 urlencode($filename),不行请查看HTML中显示的src并酌情解决。 $output .= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}'/>"; }else { //上传失败则把error.jpg传回给前端 $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>"; } $index++;
}
echo $gb_filename.$filename;exit;
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- axios上传图片,koa2接收保存上传的图片,lrz在上传前压缩图片
- Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
- Python+OpenCV为图片添加中文水印与图片水印
- 小帅一点资讯版本更新,增加图片转字符图片功能
- php使用jquery Form 实现页面无刷新上传图片,并预览图片
- php 替换文章中的图片路径,下载图片到本地服务器的方法
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
新媒体运营实战技能
张向南 勾俊伟 / 人民邮电出版社 / 2017-5 / 39.80元
《新媒体运营实战技能》共7章。第1章重点介绍了新媒体图片的创意思路及制作技巧,包括微信公众号封面图、信息长图、icon图标、九宫图、gif图片的具体实战操作;第2章重点介绍了创意云文字、微信排版、滑动看图等新媒体文字的排版方法与处理技巧;第3章是新媒体表单,引导读者对表单结构、设计场景及具体应用全面了解;第4章关于H5的创意思路及制作方法,解析了引发H5传播的心理因素,并重点介绍H5的制作工具与具......一起来看看 《新媒体运营实战技能》 这本书的介绍吧!