干货：
问题：在a.com上上传图片至b.com
html(a.com)
<div class="box_03">
<iframe style="width:100%;height:100%;" frameborder="0" scrolling="no" src="/picupload/ming?imgurl=&shuiyin=&uploadUrl=http://b.com&inputName=logo"></iframe>
<input type="hidden" name="logo" value="">
</div>php(a.com)
public function ming(){
$types=$_GET['types']?$_GET['types']:'www';
$shuiyin=$_GET['shuiyin']?$_GET['shuiyin']:'';
$imgurl=$_GET['imgurl'];
$imgnum=$_GET['imgnum']?$_GET['imgnum']:'1';
$this->ViewEngine->assign('imgnum', $imgnum);
$this->ViewEngine->assign('shuiyin', $shuiyin);
$this->ViewEngine->assign('types', $types);
$this->ViewEngine->assign('imgurl', $imgurl);
$this->ViewEngine->display("ming_pic.html");
}html(a.com)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/picupload/css/base.css">
<script src="/picupload/js/jquery-1.7.1.min.js"></script>
</head>
<body>
<div class="comment-wrap" id="upload-wrap" style="width: 682px;">
<div class="comment-up clearfix upload-select-wrap">
<div class="placeholder upload-placeholder" {if $imgurl neq ''}style="display:none"{/if}><!--修改和style="display:none"删除-->
<div class="click-up-wrap fl">
<div class="click-up-show">上传图片</div>
<div class="click-up-hide">
<input type="file" name="file" multiple="multiple">
</div>
</div>
<p class="drag-tip fl upload-drag-tip">可直接拖动图片到此区域</p>
</div>
<ul class="filelist clearfix upload-preview" {if $imgurl neq ''}style="display:block"{/if} ><!--修改和style="display:block"删除-->
<div class="click-up-wrap fl">
<div class="click-up-show">继续添加</div>
<div class="click-up-hide">
<input type="file" name="file" multiple="multiple">
</div>
</div>
{if $imgurl neq ''}
<li>
<img src="{$imgurl}" data-order="{$imgurl}">
<div class="file-panel clearfix"><span></span></div>
</li>
{/if}
</ul>
</div>
</div>
<script src="/picupload/js/uploadImg_ming.js"></script>
<script type="text/javascript">
console.log('444');
{literal}$("#upload-wrap").uploadImg({{/literal}
maxUploadImgNum:{$imgnum}, /* @最多可以上传几张图片，并且二次修改时这必须为1 */
types:'{$types}', /* @上传到那个目录下 */
storedInputName:'{$smarty.get.inputName}', /* @input的name值存储图片链接的 修改上一级ifrem的input name*/
existedImgUrl: "{$imgurl}",//要修改的图片地址 添加时候为空
domainName:'{$smarty.get.uploadUrl}',//上传域名, 不填写有一个默认域名http://imgs.hao315.com
isDelImg:'' /* @news修改文章时，不删除图片源文件 是空的时候删除 任意值 也是删除 只有 news 是不删除*/
{literal} }){/literal}
</script>
</body>
</html>js(a.com)
(function ($) {
$.fn.uploadImg = function (params) {
/* @参数默认值 */
var defaults = {
maxUploadImgNum: 9, /* @最多可以上传几张图片，并且二次修改时这必须为1 */
existedImgUrl: '', /* @二次修改图片时，页面显示的默认图片 */
types: 'upload', /* @上传到那个目录下 */
storedInputName: 'pic3', /* @input的name值存储图片链接的,前台页面入库 */
isDelImg: '', /* @news修改文章时，不删除图片源文件 */
domainName: '//imgs.shgao.com', /* @上传的域名 */
}
/* @若未传参数则使用默认值 */
params = params || {};
for (var def in defaults) {
if (typeof params[def] === 'undefined') {
params[def] = defaults[def];
}
}
console.log('aaaa');
/* @上传图片本地预览 */
var area = this.find(".upload-select-wrap"); //并且是拖动到的区域
var waic = window.parent.document.getElementsByClassName("box_03")[0]//
var dragTip = this.find('.upload-drag-tip'); //拖拽时候的与用户的交互提示
var placeholder = this.find('.upload-placeholder'); //未选中图片之前展现的内容
var preview = this.find('.upload-preview'); //选中图片之后浏览列表
var aInput = area.find("input[name=file]"); //所有的可以上传的的按钮
var timeStamp = 0;//避免缓存
/*@用户拖动图片时的交互*/
area.get(0).ondragover = function (e) {
e = e || window.event;
e.preventDefault();
e.stopPropagation();
dragTip.innerHTML = "请释放鼠标";
};
console.log('2121');
area.get(0).ondragleave = function () {
dragTip.innerHTML = "请将图片拖到此区域";
};
/*@存储已经拖进的图片的信息{name:"",size:""}*/
var info = new FormData(); //@php可以直接获得文件对象
var icun = [];
var upAllUrl = []; //@传给后台的图片数据
area.get(0).ondrop = function (e) {
e = e || window.event;
e.preventDefault();
e.stopPropagation();
dragTip.innerHTML = "请将图片拖到此区域";
info = new FormData();
/*@当拖动多个图片时，循环出所有的图片列表*/
var jlu;
for (var l = 0; l < e.dataTransfer.files.length; l++) {
var file = e.dataTransfer.files[l];
//console.log(file);
(function (file, l) {
jlu = show(file, info, icun, l); //
})(file, l)
if (jlu == false) { //当用户选择大于9张的图片时，只提示一次就行
break;
}
}
upImgAjax()
};
/*@使用input file上传*/
for (var i = 0; i < aInput.length; i++) {
aInput[i].onchange = function () {
var _this = this;
if (this.value && this.files.length > 0) {
info = new FormData()
var jlu;
for (var j = 0; j < this.files.length; j++) {
(function (j) {
var item = _this.files.item(j);
jlu = show(item, info, icun, j);
})(j)
if (jlu == false) {
break;
}
}
upImgAjax()
}
dragTip.innerHTML = "请将图片拖到此区域！";
}
}
if (params.maxUploadImgNum == 1 && params.existedImgUrl != '') {
upAllUrl.push(params.existedImgUrl);
icun.push(params.existedImgUrl);
}
/*@渲染图片*/
function show(file, info, icun, j) {
if (icun.length >= params.maxUploadImgNum) {
upAllUrl = [];
icun = [];
alert('最多只可上传' + params.maxUploadImgNum + '张图片哦');
return false;
}
if (/image/.test(file.type)) {
icun.push(file); //@前台存储的信息，用来判断用户想要上传图片的张数
info.append('upload_file' + j, file); //@为FormData对象添加数据
} else {
alert("不支持上传该格式的文件。支持上传图片,例如：jpeg、gif、png、jpg")
}
}
/* @图片上传到服务器 */
function upImgAjax() {
var data = info;
timeStamp = new Date().getTime();
console.log(params.domainName + '/picupload.php?types=' + params.types + '&timeStamp=' + timeStamp);
console.log(data);
//发送数据
$.ajax({
url: params.domainName + '/picupload.php?types=' + params.types + '&timeStamp=' + timeStamp,
type: 'POST', /*提交方式*/
data: data,
dataType: 'json',
cache: false,
contentType: false, /*不可缺*/
processData: false, /*不可缺*/
success: function (data) {
console.log(data);//得到img url
if (data.length > 0) {
upAllUrl = upAllUrl.concat(data);
// console.log(upAllUrl)
for (var w = 0; w < data.length; w++) {
var img = new Image();
img.src = data[w];
IEVersion() < 11 ? img.setAttribute('data-order', data[w]) : img.dataset["order"] = data[w];
icun[w].order = data[w];
var li = document.createElement("li");
li.appendChild(img);
var div = document.createElement("div");
div.className = 'file-panel clearfix';
li.appendChild(div);
var span = document.createElement("span");
div.appendChild(span);
placeholder.get(0).style.height = '0';
preview.get(0).style.display = 'block';
preview.get(0).appendChild(li);
judgeNumber(upAllUrl)
}
}
},
error: function () {
alert('上传出错');
}
});
}
/* @IE版本判断，做js方法兼容用到 */
function IEVersion() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion == 7) {
return 7;
} else if (fIEVersion == 8) {
return 8;
} else if (fIEVersion == 9) {
return 9;
} else if (fIEVersion == 10) {
return 10;
} else {
return 6; //IE版本<=7
}
} else if (isEdge) {
return 'edge'; //edge
} else if (isIE11) {
return 11; //IE11
} else {
return -1; //不是ie浏览器
}
}
/* @图片从服务器上删除
* @ 图片hover， 点击删除按钮， 删除元素本身， 删除icun中对应的存储信息， 删除同时，改变栏目中的图片队列的张数以及所有图片的总大小
*/
if ($.fn.jquery < '1.7.1') {
$(preview).find('li .file-panel').bind("click", function (e) {
var _othis = $(this);
delImg(e, _othis)
});
} else {
$(preview).on('click', 'li .file-panel', function (e) {
var _othis = $(this);
delImg(e, _othis)
})
}
function delImg(e, _othis) {
e = e || window.event;
var target = e.srcElement || e.target;
var imgUrl = _othis.siblings('img')[0].getAttribute('data-order');
var _this = this;
/* @修改图时要覆盖1 */
if (params.maxUploadImgNum == 1 && params.existedImgUrl != '') {
// console.log('修改图时要覆盖1' + params.maxUploadImgNum)
$(preview).find('li').remove();
icun = [];
upAllUrl = [];
}
if (params.isDelImg == 'news') {
$("input[name=img]").val('');
console.log('不删除图片源文件')
} else {
$.ajax({
url: params.domainName + '/picupload_delete.php?picUrl=' + imgUrl + '&types=' + params.types + '&timeStamp=' + timeStamp, /*去过那个php文件*/
type: 'GET', /*提交方式*/
// data:{'picUrl':imgUrl},
cache: false,
contentType: false, /*不可缺*/
processData: false, /*不可缺*/
success: function (msg) {
console.log(msg);
if (msg == 'ok') {
var delIdx = upAllUrl.indexOf(imgUrl); //后台传给的图片url，对应删除
upAllUrl.splice(delIdx, 1);
judgeNumber(upAllUrl)
$(_othis).parent('li').remove();
} else {
console.log(msg);
alert('该图片不存在');
}
/* @服务器上图片删除成功后，再进行改变 */
changeNum(icun);
},
error: function (error) {
console.log(error)
}
})
}
for (var i = 0; i < icun.length; i++) {
if ((imgUrl == icun[i].order) || imgUrl == icun[i]) {
icun.splice(i, 1);
}
}
}
function changeNum(icun) {
var aLi = preview.get(0).querySelectorAll("li");
if (!aLi.length) {
info = new FormData();
icun = [];
placeholder.get(0).style.display = 'block';
placeholder.get(0).style.height = 'auto';
preview.get(0).style.display = 'none';
document.getElementsByName
}
}
function judgeNumber(upAllUrl) {
waic.querySelector("input[name=" + params.storedInputName + "]").value = upAllUrl;
console.log(waic.querySelector("input[name=" + params.storedInputName + "]").value)
}
}
})(jQuery);upload.php(b.com)
<?php
/*
跨域上传图片
Date:2018-8-2
@cyf
*/
//设置上传目录
header("Access-Control-Allow-Origin: *");
$types = $_GET['types'];
if(empty($types)){
$types = "www";
}
$shuiyin = $_GET['shuiyin'];
if(empty($shuiyin)){
$shuiyin = "";
}
$path1 = $types."/";
$path2 = $types."/".date('y-m-d').'/';
$dir_base = "$path2"; //文件上传根目录
if(!is_dir($path1)){
mkdir($path1,0777,true);
}
if(!is_dir($path2)){
mkdir($path2,0777,true);
}
//返回路径
$url="http://imgs.shgao.cn/";
//没有成功上传文件，报错并退出。
$output = array();
$index = 0; //$_FILES 以文件name为数组下标，不适用foreach($_FILES as $index=>$file)
foreach($_FILES as $file){
$upload_file_name = 'upload_file' . $index; //对应index.html FomData中的文件命名
//.$_FILES[$upload_file_name]['name']
$File_type = strrchr($_FILES[$upload_file_name]['name'],'.');
$code = '';
for($i=1;$i<=4;$i++){
$code .= chr(rand(97,122));
}
//echo $code;
$filename =date('YmdHis').$code.rand(99,9999).$File_type;
$gb_filename = iconv('utf-8','gb2312',$filename); //名字转换成gb2312处理
//文件不存在才上传
if(!file_exists($dir_base.$gb_filename)) {
$isMoved = false; //默认上传失败
$MAXIMUM_FILESIZE = 10 * 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); //上传文件
if($shuiyin){
addshuiyin(__DIR__.'/'.$dir_base.$gb_filename,__DIR__.'/'.$shuiyin);
//addshuiyin(__DIR__.$dir_base.$gb_filename,__DIR__.'/'.$shuiyin);
}
}
}else{
$isMoved = true; //已存在文件设置为上传成功
}
if($isMoved){
//输出图片文件<img>标签
//注：在一些系统src可能需要urlencode处理，发现图片无法显示，
//请尝试 urlencode($gb_filename) 或 urlencode($filename)，不行请查看HTML中显示的src并酌情解决。
$output[$index]="{$url}{$dir_base}{$filename}";
//$output .= "<img src='{$url}{$dir_base}{$filename}' title='{$filename}' alt='{$filename}'/>";
}else {
//上传失败则把error.jpg传回给前端
$output[$index]='error';
//$output .= "<img src='{$dir_base}error.jpg' title='{$filename}' alt='{$filename}'/>";
}
$index++;
}
echo json_encode($output);
function addshuiyin($imgurl,$waterImg){
$dst_info = getimagesize($imgurl);
switch ($dst_info[2])
{
case 1:
$dst_im =imagecreatefromgif($imgurl);break;
case 2:
$dst_im =imagecreatefromjpeg($imgurl);break;
case 3:
$dst_im =imagecreatefrompng($imgurl);break;
case 6:
$dst_im =imagecreatefromwbmp($imgurl);break;
default:
die("不支持的文件类型1");exit;
}
//水印图像
//$src = "upload/1.png"; //注意路径要写对
$src_info = getimagesize($waterImg);
switch ($src_info[2])
{
case 1:
$src_im =imagecreatefromgif($waterImg);break;
case 2:
$src_im =imagecreatefromjpeg($waterImg);break;
case 3:
$src_im =imagecreatefrompng($waterImg);break;
case 6:
$src_im =imagecreatefromwbmp($waterImg);break;
default:
die("不支持的文件类型1");exit;
}
//支持png本身透明度的方式
imagecopy($dst_im,$src_im,$dst_info[0]-$src_info[0]-10,$dst_info[1]-$src_info[1]-10,0,0,$src_info[0],$src_info[1]);
//保存图片
switch ($dst_info[2]){
case 1:
imagegif($dst_im,$imgurl);break;
case 2:
imagejpeg($dst_im,$imgurl,100);break;
case 3:
imagepng($dst_im,$imgurl);break;
case 6:
imagewbmp($dst_im,$imgurl);break;
default:
die("不支持的文件类型2");exit;
}
imagedestroy($dst_im);
imagedestroy($src_im);
}
?>delete.php(b.com)
<?php
/*
跨域删除
Date:2018-8-3
@cyf
*/
///webdir/html/imgszstvcn/
//http://imgs.zstv.cn/1808/18-08-03/2018080315485471533282534icon_04.png
//$src="http://imgs.zstv.cn/1808/18-08-03/2018080316560551533286565icon_searchqwqwl.png";
header("Access-Control-Allow-Origin: *");
/*$types = $_GET['types'];
if(empty($types)){
$types = "www";
}
$path1 = $types."/";*/
//$path1 = 'upload/';
//$path2 = date('ym')."/".date('y-m-d').'/';
//print_r($_GET);
//$src="http://pic.37cy.com/91cycc/delete.php?picUrl=http://pic.37cy.com/91cycc/1808/18-08-03/201808031738034153328908304.jpg";
$src=$_GET['picUrl'];
$src=$_GET['picUrl'];
$imgname=substr(strrchr($src,'/'),1);
$aa=trim($src,$imgname);
$bb=str_replace('http://imgs.shgao.cn','',$aa);
$deleteurl=$_SERVER['DOCUMENT_ROOT'].$bb.$imgname;
$res=unlink($deleteurl);
if($res){
echo'ok';
}else{
echo'error';
}
?>
扫一扫
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
