由于前段时间的项目中 涉及到图纸的上传 前端大神很随意的扔给我一个页面 让我自己修修改改 找了好几个素材站都没有找到合适的上传插件 最后不得已 用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;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(/</g,'<').replace(/>/g,'>') 转换html标签,否则图片无法显示。 if($("#feedback").children('img').length == 0) $("#feedback").prepend(data.replace(/</g,'<').replace(/>/g,'>')); else $("#feedback").children('img').eq(0).before(data.replace(/</g,'<').replace(/>/g,'>')); $(".loading").hide(); //加载成功移除加载图片 }, error:function(err){ // alert('上传出错'); // $(".loading").show(); //加载失败移除加载图片 } }); });
php 代码
1 function img(){ 2 $db = $GLOBALS['db']; 3 $ecs = $GLOBALS['ecs']; 4 5 $dir_base = DATA_DIR . '/product_img/' . date('Ymd') . '/'; 6 if (!file_exists($dir_base)) { 7 if (!@mkdir($dir_base, 0755,true)) { 8 return false; 9 } 10 } 11 //没有成功上传文件,报错并退出。 12 if(empty($_FILES)) { 13 echo "<textarea><img src='{$dir_base}error.jpg'/></textarea>"; 14 exit(0); 15 } 16 17 $output = "<textarea>"; 18 $index = 0; //$_FILES 以文件name为数组下标,不适用foreach($_FILES as $index=>$file) 19 foreach($_FILES as $file){ 20 $upload_file_name = 'upload_file' . $index; //对应index.html FomData中的文件命名 21 $fix = substr(strrchr($_FILES[$upload_file_name]['name'], '.'), 1); 22 $filename = base64_encode("product_img_62_48".date('YmdHis')."_".rand(1000,9999)).".".$fix; 23 $gb_filename = iconv('utf-8','gb2312',$filename); //名字转换成gb2312处理 24 //文件不存在才上传 25 if(!file_exists($dir_base.$gb_filename)) { 26 $isMoved = false; //默认 27 $MAXIMUM_FILESIZE = 8 * 1024 * 1024; //文件大小限制 8M = 8 * 1024 * 1024 B; 28 $rEFileTypes = "/^.(jpg|jpeg|gif|png){1}$/i"; //取文件后缀 29 30 if ($_FILES[$upload_file_name]['size'] <= $MAXIMUM_FILESIZE && preg_match($rEFileTypes, strrchr($gb_filename, '.'))) { 32 $isMoved = @move_uploaded_file ( $_FILES[$upload_file_name]['tmp_name'], $dir_base.$gb_filename); //上传文件 33 } 34 }else{ 35 $isMoved = true; //已存在文件设置为上传成功 36 } 37 if($isMoved){ 38 $sql = 'INSERT INTO'.$ecs->table('goods_img').'(`img_path`) VALUES '."('$dir_base$filename')"; 39 $db->query($sql); 40 $img_id = $db->insert_id(); 41 //输出图片文件<img>标签 42 //注:在一些系统src可能需要urlencode处理,发现图片无法显示, 43 // 请尝试 urlencode($gb_filename) 或 urlencode($filename),不行请查看HTML中显示的src并酌情解决。 44 $output .= "<div class='thumblist' id='imageDelete{$img_id}' >"; 45 $output .= "<div class='thumboperate'>"; 46 // $output .= "<a href='' class='replace'></a>"; 47 $output .= "<a href='' onclick='imgdelete({$img_id});return false;' class='delete'></a>"; 48 $output .= "</div>"; 49 $output .= "<input type='hidden' name='imagepath[]' value='{$img_id}'>"; 50 $output .= "<img src='{$dir_base}{$filename}' title='{$filename}' alt='{$filename}' style=' 62px;height: 48px;'/>"; 51 $output .= "</div>"; 52 }else { 53 $output .= "<div class='thumblist' >"; 54 $output .= "<div class='thumboperate'>"; 55 // $output .= "<a href='' class='replace'></a>"; 56 $output .= "<a href='' class='delete'></a>"; 57 $output .= "</div>"; 58 $output .= "<input type='hidden' name='imagepath[]' value='{$dir_base}{$filename}'>"; 59 $output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}' style=' 62px;height: 48px;'/>"; 60 $output .= "</div>"; 61 } 62 63 $index++; 64 } 65 66 echo $output."</textarea>"; 67 }
由于本人比较懒,细节方面就不调了
验证方法附上
1 function checkImgExt(filename) 2 { 3 var flag = false; //状态 "jpg","png","jpeg","gif" 4 var arr = ["jpg","png","jpeg","gif"]; 5 //取出上传文件的扩展名 6 var index = filename.lastIndexOf("."); 7 var ext = filename.substr(index+1).toLowerCase( ); 8 //循环比较 9 for(var i=0;i<arr.length;i++) 10 { 11 if(ext == arr[i]) 12 { 13 flag = true; //一旦找到合适的,立即退出循环 14 break; 15 } 16 } 17 //条件判断 18 if(!flag) 19 { 20 alert('你上传的图片类型不正确'); 21 // $("#Model").val(''); 22 return false; 23 } 24 };