FormData自定义上传图片

由于前段时间的项目中 涉及到图纸的上传 前端大神很随意的扔给我一个页面 让我自己修修改改 找了好几个素材站都没有找到合适的上传插件 最后不得已 用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;
}
};
上一篇:BZOJ 1096: [ZJOI2007]仓库建设 [斜率优化DP]


下一篇:Winform中生成自动控件