AJax技术

php+ajax 无刷新上传图片示例

字号+ 作者:H5之家 来源:H5之家 2017-04-03 14:04 我要评论( )

三零网提供网络编程、 PHP编程 的技术文章php+ajax 无刷新上传图片示例给大家,希望大家喜欢,关键词php+ajax 无刷新上传图片示例

jQuery(function ($) { $(".fileupload").change(function(){ //选择文件 if ('' === $(this).val()) return; var upimg = $(this).parent().parent().parent(); var showimg = upimg.find('.showimg'); var btn = upimg.find('.btn span'); var imgsrc = upimg.find('.imgsrc'); $(this).parent().ajaxSubmit({ //dataType: 'json', //数据格式为json beforeSend: function() { //开始上传 showimg.empty(); //清空显示的图片 imgsrc.val(""); btn.html("上传中..."); //上传按钮显示上传中 }, uploadProgress: function(event, position, total, percentComplete) { }, success: function(data) { //成功 //获得后台返回的json数据,显示文件名,大小,以及删除按钮 var img = data; //显示上传后的图片 imgsrc.val(""); imgsrc.val(img); showimg.html("<img src='"+img+"'>"); btn.html("上传成功"); //上传按钮还原 }, error:function(xhr){ //上传失败 btn.html("上传失败"); } }); }); });

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • php+ajax实现无刷新动态加载数据技术,phpajax

    php+ajax实现无刷新动态加载数据技术,phpajax

    2017-03-24 10:03

  • h5cn实现AJAX无刷新评论制作详解

    h5cn实现AJAX无刷新评论制作详解

    2017-03-16 09:03

  • 如何基于Ajax技术实现无刷新用户登录功能?

    如何基于Ajax技术实现无刷新用户登录功能?

    2017-03-13 13:02

  • php ajax无刷新上传图片实例代码

    php ajax无刷新上传图片实例代码

    2017-03-09 11:00

网友点评