联系官方销售客服

1835022288

028-61286886

开发框架 版主:迅睿框架研发组
怎么自定义表单中上传图片
类型:迅睿CMS 更新时间:2022-02-16 14:15:53 上传图片

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

回帖
  • 迅睿框架联合创始人
    #1楼    迅睿框架联合创始人
    2022-02-15 10:15:25
    Chrome 0
  • 笨笨
    #2楼    笨笨
    2022-02-15 10:40:01
    Chrome 0
    迅睿框架联合创始人
    image
    上传成功后又跳这个
    image
  • 小波工作室--标签和API大师
    #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"> 姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</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"> 传&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;真</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大师 其他都可以提交
  • 小波工作室--标签和API大师
    #6楼    小波工作室--标签和API大师
    2022-02-15 11:01:31
    Chrome 0

    image
    action需要设置一个值呀
  • 笨笨
    #7楼    笨笨
    2022-02-15 11:05:49
    Chrome 0
    小波工作室--标签和API大师 这个是怎么设置的??有没有实例?可以帮忙加一下吗?
  • 笨笨
    #8楼    笨笨
    2022-02-15 11:16:29
    Chrome 0
    小波工作室--标签和API大师他这个图片地址还是上传不上去
    image
  • 小波工作室--标签和API大师
    #9楼    小波工作室--标签和API大师
    2022-02-15 11:21:40
    Chrome 0
    可以加我QQ有偿给你写前端代码
  • 优速-有偿帮忙解决问题
    #10楼    优速-有偿帮忙解决问题
    2022-02-15 11:24:23
    Chrome 0

    image
    我做的表单,支持上传图片,需要可以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>
    你自己测试改动一下
  • Gxys
    #12楼    Gxys
    2022-02-16 14:15:53
    Chrome 0
    优速-有偿帮忙解决问题 替自己宣传的时候请不要截图别人网站的表单,说是自己做的表单。格局大一点啊,大佬。