迅睿開(kāi)源框架是一款PHP8高性能·簡(jiǎn)單易用的PHP開(kāi)源開(kāi)發(fā)框架, 基于MIT開(kāi)源許可協(xié)議發(fā)布,不限制商業(yè)使用,以多端互聯(lián)為設(shè)計(jì)理念, 支持的微信公眾號(hào)、小程序、APP客戶端、移動(dòng)端網(wǎng)站、PC網(wǎng)站等多終端式管理系統(tǒng)。
業(yè)務(wù)經(jīng)理
微信掃描以上二維碼
028-61286886
技術(shù)咨詢
怎么自定義表單中上傳圖片???自己的模板?求幫忙?
參考文檔:《前端自定義上傳文件方式》 參考以下
開(kāi)源是一種精神,但不是義務(wù),幫忙是情分,不幫也不要抱怨,建議大家多研究代碼、多閱讀代碼、多翻閱社區(qū)歷史問(wèn)題!
回復(fù)@迅??蚣苈?lián)合創(chuàng)始人
上傳成功后又跳這個(gè)
<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">
<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>
<td height="28" align="right">證件名稱</td>
<td height="28"><input type="text" name="data[zjmc]">
<td height="28" align="right">證件號(hào)碼</td>
<td height="28"><input type="text" name="data[zjhm]">
<td height="28" align="right">通信地址</td>
<td height="28"><input type="text" name="data[tongxindizhi]">
<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]; // 獲取文件對(duì)象
var FileController = "/index.php?s=api&c=file&token={dr_get_csrf_token()}&m=upload&p=e55f4e433f29944215937690dbf3fe03&fid=74";
// 接收上傳文件的后臺(tái)地址,418是上面的字段id號(hào)
var form = new FormData();
form.append("author", "xunruicms"); // 可以增加表單數(shù)據(jù)
form.append("file_data", fileObj); // 文件對(duì)象
// XMLHttpRequest 對(duì)象
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('上傳失?。?#39;+json.msg);
$('#show_file').html('上傳失?。?#39;+json.msg);
}
console.log(json);
xhr.send(form);
</script>
</td>
<td height="28" align="right">聯(lián)系電話</td>
<td height="28"><input type="text" name="data[lxdh]">
<td height="28" align="right">
傳 真</td>
<td height="28"><input type="text" name="data[cz]" >
<td height="28" align="right">電子郵件</td>
<td height="28" ><input type="text"name="data[dzyj]" >
<span class="red">*</span>
<td height="28" align="right">郵政編碼</td>
<td height="28"><input type="text" name="data[yzbm]"></td>
</table>
回復(fù)@小波工作室--標(biāo)簽和API大師 其他都可以提交
action需要設(shè)置一個(gè)值呀
回復(fù)@小波工作室--標(biāo)簽和API大師 這個(gè)是怎么設(shè)置的??有沒(méi)有實(shí)例?可以幫忙加一下嗎?
回復(fù)@小波工作室--標(biāo)簽和API大師他這個(gè)圖片地址還是上傳不上去
我做的表單,支持上傳圖片,需要可以QQ找我
我是直接用的默認(rèn)表單的上傳,你也可以試試,改下樣式就行了。
我看了一下文件上傳相關(guān)代碼,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']
創(chuàng)建表單生成的代碼:
<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>
你自己測(cè)試改動(dòng)一下
回復(fù)@優(yōu)速-有償幫忙解決問(wèn)題 替自己宣傳的時(shí)候請(qǐng)不要截圖別人網(wǎng)站的表單,說(shuō)是自己做的表單。格局大一點(diǎn)啊,大佬。
參考文檔:《前端自定義上傳文件方式》 參考以下
開(kāi)源是一種精神,但不是義務(wù),幫忙是情分,不幫也不要抱怨,建議大家多研究代碼、多閱讀代碼、多翻閱社區(qū)歷史問(wèn)題!
回復(fù)@迅??蚣苈?lián)合創(chuàng)始人

上傳成功后又跳這個(gè)

回復(fù)@迅??蚣苈?lián)合創(chuàng)始人
<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">證件號(hào)碼</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]; // 獲取文件對(duì)象
var FileController = "/index.php?s=api&c=file&token={dr_get_csrf_token()}&m=upload&p=e55f4e433f29944215937690dbf3fe03&fid=74";
// 接收上傳文件的后臺(tái)地址,418是上面的字段id號(hào)
var form = new FormData();
form.append("author", "xunruicms"); // 可以增加表單數(shù)據(jù)
form.append("file_data", fileObj); // 文件對(duì)象
// XMLHttpRequest 對(duì)象
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('上傳失?。?#39;+json.msg);
$('#show_file').html('上傳失?。?#39;+json.msg);
}
console.log(json);
}
xhr.send(form);
}
</script>
</td>
</tr>
<tr>
<td height="28" align="right">聯(lián)系電話</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>
回復(fù)@小波工作室--標(biāo)簽和API大師 其他都可以提交
action需要設(shè)置一個(gè)值呀
回復(fù)@小波工作室--標(biāo)簽和API大師 這個(gè)是怎么設(shè)置的??有沒(méi)有實(shí)例?可以幫忙加一下嗎?
回復(fù)@小波工作室--標(biāo)簽和API大師他這個(gè)圖片地址還是上傳不上去

我做的表單,支持上傳圖片,需要可以QQ找我
我是直接用的默認(rèn)表單的上傳,你也可以試試,改下樣式就行了。
我看了一下文件上傳相關(guān)代碼,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:
創(chuàng)建表單生成的代碼:
<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>你自己測(cè)試改動(dòng)一下
回復(fù)@優(yōu)速-有償幫忙解決問(wèn)題 替自己宣傳的時(shí)候請(qǐng)不要截圖別人網(wǎng)站的表單,說(shuō)是自己做的表單。格局大一點(diǎn)啊,大佬。