聯系官方銷售客服
1835022288
028-61286886
投訴
解決中 / 官方已回 怎么自定義表單中上傳圖片
12 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>
回復@小波工作室--標簽和API大師 其他都可以提交
action需要設置一個值呀
回復@小波工作室--標簽和API大師 這個是怎么設置的？？有沒有實例？可以幫忙加一下嗎？
回復@小波工作室--標簽和API大師他這個圖片地址還是上傳不上去
我做的表單，支持上傳圖片，需要可以QQ找我
我是直接用的默認表單的上傳，你也可以試試，改下樣式就行了。
我看了一下文件上傳相關代碼，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：
創建表單生成的代碼：
<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>你自己測試改動一下
回復@優速-有償幫忙解決問題 替自己宣傳的時候請不要截圖別人網站的表單，說是自己做的表單。格局大一點啊，大佬。