怎么自定义表单中上传图片,迅睿CMS,Codeigniter/Laravel/ThinkPHP技术文档,PHP开发文档,迅睿CMS框架官方教程

联系官方销售客服

1835022288

028-61286886

问题求助问题分享经验

开发框架版主：迅睿框架研发组

怎么自定义表单中上传图片

笨笨

类型：迅睿CMS 更新时间：2022-02-16 14:15:53 上传图片

怎么自定义表单中上传图片？？？自己的模板？求帮忙？

回帖

#1楼迅睿框架联合创始人

2022-02-15 10:15:25
Chrome 0

参考文档：《前端自定义上传文件方式》参考以下
#2楼笨笨

2022-02-15 10:40:01
Chrome 0

迅睿框架联合创始人

上传成功后又跳这个
#3楼小波工作室--标签和API大师

2022-02-15 10:45:37
Chrome 0

表单问题，修改下前端模板代码呗
#4楼笨笨

2022-02-15 10:58:15
Chrome 0

迅睿框架联合创始人 <tr> <td> {php extract(dr_get_form_post_value('yishenqing'))} <form action="" method="post" name="myform" id="myform"> {$form} <table cellpadding="0" cellspacing="0" class="zitable"> <tr> <td height="28" align="right" width="82"> 姓       名</td> <td height="28"><input type="text" name="data[title]" > <span class="red">*</span></td> <td height="28" align="right">工作单位</td> <td height="28"><input type="text" name="data[gzdw]"></td> </tr> <tr> <td height="28" align="right">证件名称</td> <td height="28"><input type="text" name="data[zjmc]"> <span class="red">*</span></td> <td height="28" align="right">证件号码</td> <td height="28"><input type="text" name="data[zjhm]"> <span class="red">*</span></td> </tr> <tr> <td height="28" align="right">通信地址</td> <td height="28"><input type="text" name="data[tongxindizhi]"> <span class="red">*</span></td> <td height="28" align="right">证件照片</td> <td height="28"> <script src="{THEME_PATH}assets/global/plugins/jquery.min.js" type="text/javascript"></script> <input id="file" type="file" name="file"/> <input id="dr_file" type="hidden" value="" name="data[zjzp]"/> <button onclick="UpladFile()">上传文件</button> <label id="show_file"></label> <script type="text/javascript"> function UpladFile() { $('#show_file').html('正在上传...'); var fileObj = document.getElementById('file').files[0]; // 获取文件对象 var FileController = "/index.php?s=api&c=file&token={dr_get_csrf_token()}&m=upload&p=e55f4e433f29944215937690dbf3fe03&fid=74"; // 接收上传文件的后台地址，418是上面的字段id号 var form = new FormData(); form.append("author", "xunruicms"); // 可以增加表单数据 form.append("file_data", fileObj); // 文件对象 // XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); xhr.open("post", FileController, true); xhr.onload = function () { var json = JSON.parse(xhr.responseText); if (json.code) { alert('上传成功'); $('#dr_file').val(json.id); // 把上传成功的文件id赋值给表单控件 $('#show_file').html('上传成功：'+json.info.url); // 返回文件的url } else { alert('上传失败：'+json.msg); $('#show_file').html('上传失败：'+json.msg); } console.log(json); } xhr.send(form); } </script> </td> </tr> <tr> <td height="28" align="right">联系电话</td> <td height="28"><input type="text" name="data[lxdh]"> <span class="red">*</span></td> <td height="28" align="right"> 传       真</td> <td height="28"><input type="text" name="data[cz]" > </td> </tr> <tr> <td height="28" align="right">电子邮件</td> <td height="28" ><input type="text"name="data[dzyj]" > <span class="red">*</span> </td> <td height="28" align="right">邮政编码</td> <td height="28"><input type="text" name="data[yzbm]"></td> </tr> </table> </td> </tr>
#5楼笨笨

2022-02-15 10:58:35
Chrome 0

小波工作室--标签和API大师其他都可以提交
#6楼小波工作室--标签和API大师

2022-02-15 11:01:31
Chrome 0

action需要设置一个值呀
#7楼笨笨

2022-02-15 11:05:49
Chrome 0

小波工作室--标签和API大师这个是怎么设置的？？有没有实例？可以帮忙加一下吗？
#8楼笨笨

2022-02-15 11:16:29
Chrome 0

小波工作室--标签和API大师他这个图片地址还是上传不上去
#9楼小波工作室--标签和API大师

2022-02-15 11:21:40
Chrome 0

可以加我QQ有偿给你写前端代码
#10楼优速-有偿帮忙解决问题

2022-02-15 11:24:23
Chrome 0

我做的表单，支持上传图片，需要可以QQ找我

#11楼新手上路

2022-02-15 12:01:31

Chrome 0

我是直接用的默认表单的上传，你也可以试试，改下样式就行了。我看了一下文件上传相关代码，p值组成是这样：

 $p = dr_authcode([
            'size' => ($field['setting']['option']['size']),
            'exts' => $field['setting']['option']['ext'],
            'attachment' => $field['setting']['option']['attachment'],
            'image_reduce' => $field['setting']['option']['image_reduce'],
        ], 'ENCODE')

fid：

$field['id']

创建表单生成的代码：

<div class="form-group" id="dr_row_zjzp">
    <label class="control-label col-md-2"><span class="required" aria-required="true"> * </span>证件照片</label>
    <div class="col-md-10">
			<div class="row fileupload-buttonbar" id="fileupload_zjzp">
				<div class="col-lg-12">
					<span class="btn blue btn-sm fileinput-button">
						<i class="fa fa-plus"></i>
						<span> 上传 </span>
						<input type="file" name="file_data"> 
					</span>
					
					<button onclick="fileupload_file_remove('zjzp')" style="margin-left: 5px;display:none" type="button" class="btn red btn-sm fileinput-delete">
						<i class="fa fa-trash"></i>
						<span> 删除 </span>
					</button>
					
					<span class="fileupload-process"> </span>
				</div>
				<div class="col-lg-12 fileupload-progress fade" style="display:none">
					<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
						<div class="progress-bar progress-bar-success" style="width:0%;"> </div>
					</div>
				</div>
			</div><p class="finecms-file-ts">上传格式要求：jpg（5MB）</p><div id="fileupload_zjzp_files" class="files"><input type="hidden" id="dr_zjzp" name="data[zjzp]" value=""></div>
			<link href="/static/assets/global/plugins/jquery-fileupload/css/jquery.fileupload.css" rel="stylesheet" type="text/css">
			<script src="/static/assets/global/plugins/jquery-fileupload/js/jquery.fileupload.min.js" type="text/javascript"></script>
			<script type="text/javascript">
        $(function() {
            fileupload_file_init({"name":"zjzp","ext":" \/(\\.|\\\/)(jpg)$\/i","size":5242880,"url":"\/index.php?s=api&c=file&token={dr_get_csrf_token()}&siteid=1&m=upload&p={$p}&fid={$fid}","unused_url":"\/index.php?s=api&c=file&m=input_file_list&p={$p}&fid={$fid}","input_url":"\/index.php?s=api&c=file&m=input_file_url&token={dr_get_csrf_token()}&siteid=1&p=&fid={$fid}&file=&one=1","tpl":"<div id=\"dr_zjzp_files_row\" class=\"file_row_html files_row\"><div class=\"files_row_preview preview\">{preview}<\/div><input type=\"hidden\"  id=\"dr_zjzp\" class=\"files_row_id\" name=\"data[zjzp]\" value=\"{id}\" \/><\/div>","area":["80%","80%"],"url_area":["50%","300px"],"chunk":0});
        });
        </script></div>
</div>

你自己测试改动一下

#12楼 Gxys

2022-02-16 14:15:53
Chrome 0

优速-有偿帮忙解决问题替自己宣传的时候请不要截图别人网站的表单，说是自己做的表单。格局大一点啊，大佬。