分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

jqueryForm 异步上传图片文件

发布时间:2023-09-06 01:13责任编辑:沈小雨关键词:上传图片

首先是HTML格式:

<li> ???????????????????????????????????<span>上传:</span> ???????????????????????????????????<div class="loginInput"> ???????????????????????????????????????<div class="fileInput"> ???????????????????????????????????????????<div class="fileBox"> ???????????????????????????????????????????????{if $info[‘certificate‘]} ???????????????????????????????????????????????<img src="{$info[‘certificate‘]}" width="278"> ???????????????????????????????????????????????{else} ???????????????????????????????????????????????<i class="filePic"></i> ???????????????????????????????????????????????<p>法人证书或营业执照复印件</p> ???????????????????????????????????????????????{/if} ???????????????????????????????????????????</div> ???????????????????????????????????????????<input class="files" id="fileupload" name="file" type="file" value="{$info[‘certificate‘]}"/> ???????????????????????????????????????????<input type="hidden" name="certificate" id="pic_val" > ???????????????????????????????????????</div> ???????????????????????????????????</div> ???????????????????????????????</li>

 input 的 name建议设置成file 要不有时候接收不到传递到后台的参数。

然后是js:

<script src="https://www.helloweba.com/demo/ajaxsubmit/jquery.form.min.js" type="text/javascript"></script><script type="text/javascript"> ???$(function () { ???????var bar = $(‘.bar‘); ???????var percent = $(‘.percent‘); ???????var showimg = $(‘#showimg‘); ???????var progress = $(".progress"); ???????var files = $(".files"); ???????var btn = $(".btn span"); ???????$("#fileupload").wrap("<form id=‘myupload‘ action=‘{HOST_NAME}user/User/import3‘ method=‘post‘ enctype=‘multipart/form-data‘></form>"); ???????$("#fileupload").change(function(){ ???????????$("#myupload").ajaxSubmit({ ???????????????dataType: ?‘json‘, ???????????????beforeSend: function() {// ???????????????????showimg.empty();// ???????????????????progress.show();// ???????????????????var percentVal = ‘0%‘;// ???????????????????bar.width(percentVal);// ???????????????????percent.html(percentVal);// ???????????????????btn.html("上传中..."); ???????????????}, ???????????????uploadProgress: function(event, position, total, percentComplete) { ???????????????????var percentVal = percentComplete + ‘%‘; ???????????????????bar.width(percentVal); ???????????????????percent.html(percentVal); ???????????????}, ???????????????success: function(data) { ???????????????????if(data.status == 0) { ???????????????????????$(‘.fileBox i‘).hide(); //删除 ???????????????????????$(‘.fileBox p‘).hide(); // 删除 ???????????????????????$(‘.fileBox img‘).attr(‘src‘, data.name); // 显示 ???????????????????????$(‘.fileBox img‘).show(); //显示 ???????????????????????$("#pic_val").attr(‘value‘, data.name); //传递图片值// ???????????????????????$("#show_pic_show").attr(‘src‘, data.name); // 传递到初始阶段 ???????????????????}else{ ???????????????????????layer.msg(data.name, { ???????????????????????????offset: ‘t‘, ???????????????????????????anim: 6 ???????????????????????}); ???????????????????????return false; ???????????????????} ???????????????????return false; ???????????????}, ???????????????error:function(xhr){ ???????????????????btn.html("上传失败"); ???????????????????bar.width(‘0‘) ???????????????????files.html(xhr.responseText); ???????????????} ???????????}); ???????}); ???});</script><!--ajax图片上传结束-->

后台代码PHP:

// 上传文件 ???public function import3Action() ???{ ???????//上传头像 ???????if(isPost()){ ???????????$file = $_FILES[‘file‘][‘tmp_name‘]; ???????????if(!empty($file)){ ???????????????Load::load_class(‘fileupload‘,DIR_BF_ROOT.‘classes‘,0); ???????????????$up = new fileupload; ???????????????$up -> set("path", DIR_ROOT . ‘static/uploadfile/zhizhao‘); ???????????????// ???????????$up -> set("path",DIR_BF_ROOT . ‘excel/‘); ???????????????$up -> set("maxsize", 200000); ???????????????$up -> set("allowtype", array("gif", "png", "jpg","jpeg")); ???????????????// ???????????$up -> set("allowtype", array("xls")); ???????????????if($up -> upload("file")) { ???????????????????// 获取上传后的文件名称 ???????????????????$filename = ?‘/static/uploadfile/zhizhao/‘.$up->getFileName(); ???????????????????echo json_encode(array(‘status‘ => 0, ‘name‘ => $filename));exit(); ???????????????} else { ???????????????????echo json_encode(array(‘statsu‘ => 1, ‘name‘ => $up->getErrorMsg()));exit(); ???????????????} ???????????} ???????} ???????//上传头像结束 ???????include $this->display(‘fileTest.html‘); ???}

jqueryForm 异步上传图片文件

原文地址:http://www.cnblogs.com/photo520/p/7576092.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved