Ajax实现图片上传并预览功能

先给大家展示下效果图,大家感觉不错,请参考实现代码。

最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能。虽然现在有很多的插件能实现,但是还是觉得自己写比较好。我们知道,图片上传需要一个input:file表单

<input type='file' name='pic'>

当我们点击表单的时候提示选择需要上传的图片。但是此需求我们分析一下,可以在点击图片的时候使用JS实现预览功能,并且楼主也是这样做的。代码如下:

function getFileUrl(sourceId) {

var url;

url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));

return url;

}

function preImg(sourceId, targetId) {

var url = getFileUrl(sourceId);

var imgPre = document.getElementById(targetId);

imgPre.src = url;

}

效果如下:

但是这样的话会涉及很多兼容问题。所以就想到了Ajax,在图片上传时,使用Ajax技术。将图片上传到服务器,再由服务器返回给我们图片的上传地址,然后添加到img标签中去。过程虽然麻烦了点,但是亲测不会有兼容问题。

需要发送Ajax请求的话,当然input:file表单是不能实现我们的需求的,因此,我们需要给表单关联一个单击事件去帮我们进行Ajax请求并选择图片

<form id="form1">

<label for="exampleInputEmail1">头像</label>

<input type="button" value="上传图片" onclick="f.click()" class="btn_mouseout"/><br>

<p><input type="file" id="f" name="f" onchange="sc(this);" style="display:none"/></p>

</form>

<div id="result"></div>

当我们点击上传图片这个button按钮时触发input:file选择图片实现Ajax上传

<script>

function sc(){

var animateimg = $("#f").val(); //获取上传的图片名 带//

var imgarr=animateimg.split('\\'); //分割

var myimg=imgarr[imgarr.length-1]; //去掉 // 获取图片名

var houzui = myimg.lastIndexOf('.'); //获取 . 出现的位置

var ext = myimg.substring(houzui, myimg.length).toUpperCase(); //切割 . 获取文件后缀

var file = $('#f').get(0).files[0]; //获取上传的文件

var fileSize = file.size; //获取上传的文件大小

var maxSize = 1048576; //最大1MB

if(ext !='.PNG' && ext !='.GIF' && ext !='.JPG' && ext !='.JPEG' && ext !='.BMP'){

parent.layer.msg('文件类型错误,请上传图片类型');

return false;

}else if(parseInt(fileSize) >= parseInt(maxSize)){

parent.layer.msg('上传的文件不能超过1MB');

return false;

}else{

var data = new FormData($('#form1')[0]);

$.ajax({

url: "{:url('User/uppic')}",

type: 'POST',

data: data,

dataType: 'JSON',

cache: false,

processData: false,

contentType: false

}).done(function(ret){

if(ret['isSuccess']){

var result = '';

var result1 = '';

// $("#show").attr('value',+ ret['f'] +);

result += '<img src="' + '__ROAD__' + ret['f'] + '" width="100">';

result1 += '<input value="' + ret['f'] + '" name="user_headimg" style="display:none;">';

$('#result').html(result);

$('#show').html(result1);

layer.msg('上传成功');

}else{

layer.msg('上传失败');

}

});

return false;

}

}

</script>

这里我们采用FormData对面进行表单提交,然后服务器端接收

public function uppic()

{

$file = request()->file('f');

$info = $file->move(ROOT_PATH . 'public/uploads/avatar');

$a=$info->getSaveName();

$imgp= str_replace("\\","/",$a);

$imgpath='uploads/avatar/'.$imgp;

$banner_img= $imgpath;

$response = array();

if($info){

$response['isSuccess'] = true;

$response['f'] = $imgpath;

}else{

$response['isSuccess'] = false;

}

echo json_encode($response);

}

这里会返回图片上传的url路径:$response['f] = $imgpath;现在我们要做的就是将这个url写进前台HTML部分进行一个显示

<div class="form-group">

<!-- 将Ajax上传的图片路径添加到数据库 -->

<div id="show"></div>

</div>

在JS中添加

$('#show').html(result1);

总结

以上所述是小编给大家介绍的Ajax实现图片上传并预览功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是 Ajax实现图片上传并预览功能 的全部内容, 来源链接: utcz.com/z/313173.html

回到顶部