由于前段时间的项目中 涉及到图纸的上传 前端大神很随意的扔给我一个页面 让我自己修修改改 找了好几个素材站都没有找到合适的上传插件 最后不得已 用formdata 写了一个 顺便记录下吧

html 代码

<li>
<label class="left">上传产品图片:</label>
<div class="formlisttext" id="feedback">
  <a onClick="getElementById('inputfile').click()" class="addpic"><b>+</b><br />添加图片</a>
  <input type="file" onchange=checkImgExt(this.value) multiple="multiple" name="image" id="inputfile" style="height:0;width:0;z-index: -1; position: absolute;left: 10px;top: 5px;"/>
  <small class="long">支持jpeg、jpg、gif、png等图片格式,单张图片最大不超过8M。</small>
   </div>
</li>

js 代码

$("#inputfile").change(function(){
//创建FormData对象
var data = new FormData();
//为FormData对象添加数据
$.each($('#inputfile')[0].files, function(i, file) {
data.append('upload_file'+i, file);
}); //发送数据
$.ajax({
url:'url', //地址自己写啊
type:'POST',
data:data,
cache: false,
contentType: false, //不可缺参数
processData: false, //不可缺参数
success:function(data){ data = $(data).html(); //第一个feedback数据直接append,其他的用before第1个( .eq(0).before() )放至最前面。
//data.replace(/&lt;/g,'<').replace(/&gt;/g,'>') 转换html标签,否则图片无法显示。
if($("#feedback").children('img').length == 0)
$("#feedback").prepend(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));
else
$("#feedback").children('img').eq(0).before(data.replace(/&lt;/g,'<').replace(/&gt;/g,'>'));
$(".loading").hide(); //加载成功移除加载图片
},
error:function(err){
// alert('上传出错');
// $(".loading").show(); //加载失败移除加载图片
}
});
});

php 代码

 function img(){
$db = $GLOBALS['db'];
$ecs = $GLOBALS['ecs']; $dir_base = DATA_DIR . '/product_img/' . date('Ymd') . '/';
if (!file_exists($dir_base)) {
if (!@mkdir($dir_base, 0755,true)) {
return false;
}
}
//没有成功上传文件,报错并退出。
if(empty($_FILES)) {
echo "<textarea><img src='{$dir_base}error.jpg'/></textarea>";
exit(0);
} $output = "<textarea>";
$index = 0; //$_FILES 以文件name为数组下标,不适用foreach($_FILES as $index=>$file)
foreach($_FILES as $file){
$upload_file_name = 'upload_file' . $index; //对应index.html FomData中的文件命名
$fix = substr(strrchr($_FILES[$upload_file_name]['name'], '.'), 1);
$filename = base64_encode("product_img_62_48".date('YmdHis')."_".rand(1000,9999)).".".$fix;
$gb_filename = iconv('utf-8','gb2312',$filename); //名字转换成gb2312处理
//文件不存在才上传
if(!file_exists($dir_base.$gb_filename)) {
$isMoved = false; //默认
$MAXIMUM_FILESIZE = 8 * 1024 * 1024; //文件大小限制 8M = 8 * 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){
$sql = 'INSERT INTO'.$ecs->table('goods_img').'(`img_path`) VALUES '."('$dir_base$filename')";
$db->query($sql);
$img_id = $db->insert_id();
//输出图片文件<img>标签
//注:在一些系统src可能需要urlencode处理,发现图片无法显示,
// 请尝试 urlencode($gb_filename) 或 urlencode($filename),不行请查看HTML中显示的src并酌情解决。
$output .= "<div class='thumblist' id='imageDelete{$img_id}' >";
$output .= "<div class='thumboperate'>";
// $output .= "<a href='' class='replace'></a>";
$output .= "<a href='' onclick='imgdelete({$img_id});return false;' class='delete'></a>";
$output .= "</div>";
$output .= "<input type='hidden' name='imagepath[]' value='{$img_id}'>";
$output .= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}' style='width: 62px;height: 48px;'/>";
$output .= "</div>";
}else {
$output .= "<div class='thumblist' >";
$output .= "<div class='thumboperate'>";
// $output .= "<a href='' class='replace'></a>";
$output .= "<a href='' class='delete'></a>";
$output .= "</div>";
$output .= "<input type='hidden' name='imagepath[]' value='{$dir_base}{$filename}'>";
$output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}' style='width: 62px;height: 48px;'/>";
$output .= "</div>";
} $index++;
} echo $output."</textarea>";
}

由于本人比较懒,细节方面就不调了

验证方法附上

 function checkImgExt(filename)
{
var flag = false; //状态 "jpg","png","jpeg","gif"
var arr = ["jpg","png","jpeg","gif"];
//取出上传文件的扩展名
var index = filename.lastIndexOf(".");
var ext = filename.substr(index+1).toLowerCase( );
//循环比较
for(var i=0;i<arr.length;i++)
{
if(ext == arr[i])
{
flag = true; //一旦找到合适的,立即退出循环
break;
}
}
//条件判断
if(!flag)
{
alert('你上传的图片类型不正确');
// $("#Model").val('');
return false;
}
};

FormData自定义上传图片的更多相关文章

  1. css3自定义上传图片输入框的方法

    css3自定义上传图片输入框的方法 代码如下<pre> <form class="form1"> <img src="/kelatoupia ...

  2. 编码为multipart/form-data自定义类型(包括文件)如何自动绑定到webapi的action的参数里

    application/x-www-form-urlencoded与 multipart/form-data: Fom表单中如果没有type=file的控件,用默认的application/x-www ...

  3. Element 以二进制的形式 自定义上传图片

    一,只有在上传文件之前的钩子函数中才可以获得最初的文件(文件本身的二进制形式),用以以上传服务器. 还需要使用formdata来承载数据,便于接收 <template>   <div ...

  4. html 自定义上传图片样式,并回显

    <div id="photoUpLoad"> <input type="file" id="photo" name=&qu ...

  5. 百度富文本编辑器UEditor自定义上传图片接口

    如下图:  然后修改ueditor.all.js   

  6. 使用H5 formData对象上传图片和视频的文件时,必填的属性

    async : false,cache : false,contentType : false,// 告诉jQuery不要去设置Content-Type请求头processData : false,/ ...

  7. vue结合element实现自定义上传图片、文件

    参考了很多文献,感谢各位帖子,所以也想把自己遇到不会的东西分享出来,菜鸟一枚大家一进步!

  8. CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

    因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...

  9. 基于layui+cropper.js实现上传图片的裁剪功能

    最近因项目需求,需要在上传图片的时候先对图片裁剪,然后在上传,所以就有了本文的出现. 开始正文之前,要提一下这个图片的裁剪:图片的裁剪,有前端裁剪,也可以后端裁剪 前端的裁剪我知道的可以分为这么两种: ...

随机推荐

  1. linux配置远程Git仓库

    一,安装git yum install git 二,在服务器(119.28.1.1)目录( /git/admin )上创建一个仓库 cd /git/admin touch aaa.html git i ...

  2. 【Win 10 应用开发】在后台播放视频

    从 1607 (14393)版本开始,MediaPlayer 类就可以在前台与后台之间无缝播放,你不必再考虑前台与后之间的通信,所以从 14393 开始,你就不需要再用 BackgroundMedia ...

  3. Mybatis(三)返回值

    Mybatis返回值 MyBatis中在查询进行select映射的时候,返回类型可以用resultType,也可以用resultMap,resultType是直接表示返回类型的,而resultMap则 ...

  4. SQL基础知识一

    一.建库 show databases ;//显示已存在的数据库 create database 数据库库名; use 数据库名;//进入新建的数据 二.建表 show tables;//查询已存在的 ...

  5. js实现谷歌网站统计

    基本方法 function ga() { if (window.ga) { window.ga.apply(null, arguments); } else { stack.push(argument ...

  6. PHP如何强制下载文件

    很多网站都需要做文件下载的功能.如果直接给连接的方式下载的话有很多的弊处...因为有时候需要对下载权限的检查,对下载次数的检查.所以一般采用php的方法进行安全下载.但是下载的时候如果是txt jpg ...

  7. C++几个技巧:智能指针在消息传递中的使用,元组,及lambda删除器

    1.SendMessage/PostMessage中传递对象参数 (1)方法1:使用shared_ptr 发送端: PostMessage(MyhWnd, CWM_SOME_ERROR, 0, rei ...

  8. 独家探寻阿里安全潘多拉实验室,完美越狱苹果iOS11.2.1

    知道如何从攻击的视角去发现漏洞,才能建立更安全的体系,促进了整个生态的良性发展.以阿里安全潘多拉实验室为例,在对移动系统安全研究的过程中,把研究过程中发现的问题上报给厂商,促进系统安全性的提升. 小编 ...

  9. request和response中文乱码问题后台处理办法

    request接收参数的中文乱码的处理: GET: 方法一:使用String的构造方法: new String(request.getParameter("传过来的name").g ...

  10. Ubuntu 14.4 Django模型迁移到数据库提示 LookupError: unknown encoding: utf8mb4 解决方法

    由于数据库中需要存储emoji表情,因此需要mysql支持utf8mb4,参考前面的文章升级数据库. 但是由于服务器上面的python-mysqldb连接包版本为1.2.3不支持utf8mb4,因此报 ...