js ajax php上传图片插件,写了个Ajax无刷新上传上传图片的小插件

原理： 隐藏iframe提交数据到后台(php)

js源码

/**

* (伪)无刷新上传图片

* @requires jquery,bootstrap(.css),font-awesome

* @author saonian

* @date 2017年4月6日

* @time 22:54:43

*/

$(function () {

var ico_left = (lu_upload_div_w - 15) / 2;

var ico_top = (lu_upload_div_h - 14) /2;

var html =

'

'

+'

'

+'

'

+''

+''

+'

+''

+'

'

+''

+''

+'

'

+'

'

+'

'

+'

';

$('body').find('#lu_upload_div').append(html);

$('body').find('#'+_custom_form+'').append('');

var _title_pic = $(".title_pic_m");

if(_title_pic && _title_pic.length >0){

$(document).on('mouseover mouseout','.title_pic_m',function (e) {

if(e.type === 'mouseover'){

_title_pic.tooltip('show');return false;

}else if (e.type === 'mouseout'){

_title_pic.tooltip('hide');return false;

}

})

}

//创建一个隐藏的iframe，用于上传图片及接收php返回的图片地址

var ifm_id = Math.floor(Math.random() * 1000);

$(document).on('change','#title_pic_m',function () {

var upload_file = $(this).val();

if(upload_file != ''){

var ifm_name = 'title_pic_form' + ifm_id;

var ifm_doc = '';

$("body").append(ifm_doc);

$("#title_pic_form").attr('target', ifm_name).submit();

$(".loading").show();

$(".pic_noticle").hide();

$("#my_ifm").load(function () {

var responseText = $('iframe')[0].contentDocument.body.textContent;

var responseData = JSON.parse(responseText) || {};

if(responseData.ok == 1){

$(".loading").hide();

$("#title_pic_m").hide();

$(".edit_img").show();

$('input[name="article_pic"]').val(responseData.data);

$('input[name="article_pic_m"]').val(responseData.data_m);

$(".pre_article_pic").show().children('img').attr('src',''+responseData.data+'').show();

}else{

alert(responseData.info);

$(".loading").hide();

$(".pic_noticle").show();

}

});

}

});

//重新上传题图

$(document).on('click','.reload_img',function () {

$("#title_pic_m").show().trigger("click");

var title_pic = $('input[name="article_pic"]').val();

var title_pic_m = $('input[name="article_pic_m"]').val();

var _this = $(this);

$.ajax({

url:lu_upload_del_url,

type:"post",

data:{title_pic:title_pic,title_pic_m:title_pic_m},

dataType:'json',

beforeSend : function () {

_this.unbind('click');

},

success: function (response) {

_this.bind('click');

$(".edit_img").hide();

if(response.ok == 1){

$(".pre_pic_re").attr('src','').hide();

$('input[name="article_pic"]').val('');

$('input[name="article_pic_m"]').val('');

}else{

alert(response.info);

}

}

});

});

//删除题图

$(document).on('click','.del_img',function () {

if (confirm('确定删除题图吗?')){

var _this = $(this);

var title_pic = $('input[name="article_pic"]').val();

var title_pic_m = $('input[name="article_pic_m"]').val();

$.ajax({

url:lu_upload_del_url,

type:"post",

data:{title_pic:title_pic,title_pic_m:title_pic_m},

dataType:'json',

beforeSend : function () {

_this.unbind('click');

},

success: function (response) {

_this.bind('click');

$(".edit_img").hide();

$("#title_pic_m").show();

$(".pic_noticle").show();

if(response.ok == 1){

$(".pre_pic_re").attr('src','').hide();

$('input[name="article_pic"]').val('');

$('input[name="article_pic_m"]').val('');

}else{

alert(response.info);

}

}

});

}

});

});

使用方法

var lu_upload_url = '/up_title_pic_m';//图片上传地址

var lu_upload_del_url = '/del_article_pic';//图片删除地址

var lu_upload_div_w = '120';//预览图宽度

var lu_upload_div_h = '80';//预览图高度

var _custom_form = 'c_form';//表单ID

后台处理

后台(以php为例)需要返回以下json字符串

参数

说明ok

1(成功)0(失败)

info

当 ok为0(上传失败)时的错误提示信息

data

图片地址

data_m

手机端图片地址(可选)

上传成功后会在form插入两个隐藏域

value值为后台传回的图片地址

删除图片

删除图片时会向后台传递两个参数

title_pic 图片地址

title_pic_m 手机端图片地址

例子

public function del_article_pic(){

$res = ['ok'=>0,'info'=>''];

if (checkLogin()){

if (IS_POST){

$post_data = I('post.');

$title_pic = $post_data['title_pic'] ?? '';

$title_pic_m = $post_data['title_pic_m'] ?? '';

if (!empty($title_pic) && !empty($title_pic_m)){

$title_pic_pathinfo = parse_url($title_pic);

$title_pic_m_pathinfo = parse_url($title_pic_m);

$title_pic_pathinfo = $title_pic_pathinfo['path'] ?? '';

$title_pic_m_pathinfo = $title_pic_m_pathinfo['path'] ?? '';

@unlink('.'.$title_pic_pathinfo);

@unlink('.'.$title_pic_m_pathinfo);

$res['ok'] = 1;

}

}

}

$this->ajaxReturn($res);

}