织梦wap如何上传图片？

核心思路

1. 后台准备：确保WAP模块已开启，并且有上传目录和权限。
2. 前台模板：在WAP模板文件（通常是 article_add.htm）中，找到内容编辑器，并为其添加图片上传按钮。
3. JS交互：织梦默认提供了一个JavaScript函数 DedeXHTTP，用于在WAP端处理无刷新上传，我们需要调用这个函数。
4. 返回处理：上传成功后，JavaScript会将图片的URL插入到内容编辑器中。

第一步：后台设置（准备工作）

在开始修改模板之前,请务必检查并设置好织梦后台。

1. 开启WAP模块

   • 登录织梦后台,进入【系统】-> 【系统基本参数】。
   • 在左侧菜单选择 “核心设置”。
   • 找到 “是否启用织梦WAP功能”，将其设置为“是”，然后点击“保存”。

2. 检查上传目录权限

   • 进入【系统】-> 【上传文件设置】。
   • 确保 “上传主目录”（通常是 /uploads/）和 “远程保存目录” 的权限是 777 或 755，Linux服务器下，这需要通过FTP或SSH工具来设置。
   • 非常重要：为WAP端单独设置一个上传目录，/uploads/wap/，并确保其权限也是可写的，这可以方便管理手机端上传的文件。

第二步：修改WAP内容发布模板

这是最关键的一步,你需要修改WAP站点的文章添加模板。

1. 找到模板文件

   • 织梦的WAP模板通常位于 /templets/ 目录下的 wap 文件夹中。
   • 文章添加页面的模板文件通常是：/templets/wap/article_add.htm。
   • 如果你的主题不同,请在后台【模板】-> 【默认模板管理】 中，找到“手机端模板”分类下的“文章内容页模板”进行编辑。

2. 编辑器

   • 打开 article_add.htm 文件，找到内容编辑器，它通常是一个 textarea 标签，并且有一个 id 属性，id="body" 或 id="content"。
   • 在这个 textarea 标签附近，就是你放置上传按钮的位置。

3. 添加上传按钮和相关JS代码

   • 在 textarea 标签旁边，添加一个按钮用于触发上传，为了美观，可以使用织梦自带的样式 btn。
   • 关键：你需要引入织梦的JavaScript函数库，并调用上传函数。

   修改后的代码示例：

   {dede:php}
   // 引入系统函数库，确保DedeXHTTP等函数可用
   // 在WAP模板中，通常已经自动引入，但为了保险，可以加上
   // require_once(DEDEINC.'/dedetemplate.class.php');
   {/dede:php}
   <form name='form1' method='post' enctype="multipart/form-data" action='article_add.php'>
       <!-- 其他表单字段，如标题、栏目等 -->
       <input type="text" name="title" placeholder="请输入标题" />
       <!-- 这里是关键部分：添加上传按钮 -->
       <div style="margin: 10px 0;">
           <button type="button" class="btn" onclick="FlashUpload('body', 'jpg|gif|bmp|png', '上传图片');">
               上传图片
           </button>
           <span id="uploadmsg" style="color:#F00;"></span>
       </div>
       <!-- 内容编辑器 -->
       <textarea name='body' id='body' style='width:100%; height:200px;'></textarea>
       <!-- 其他表单提交按钮 -->
       <input type="hidden" name="dopost" value="save" />
       <button type="submit" class="btn">提交</button>
   </form>
   <!-- 引入必要的JS，通常在模板底部 -->
   <script language="javascript" src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script>
   <script language="javascript" src="{dede:global.cfg_cmsurl/}/images/js/jquery/jquery.js"></script>
   <script type="text/javascript">
       // 可以在这里写一些回调函数，用于处理上传成功或失败的消息
       function ShowMsg(msg) {
           document.getElementById('uploadmsg').innerHTML = msg;
           setTimeout("document.getElementById('uploadmsg').innerHTML = '';", 3000);
       }
   </script>

第三步：理解上传函数 FlashUpload

在上面的代码中,我们使用了 FlashUpload 函数，这是织梦WAP端上传的核心，让我们来解析它的参数：

FlashUpload(目标编辑器ID, 允许的文件类型, 上传按钮文字, [是否远程上传], [上传目录])

• 目标编辑器ID (必需): 你想把图片插入到哪个文本框里，我们上面用的是 'body'。
• 允许的文件类型 (必需): 允许上传的图片后缀，用 分隔。'jpg|gif|bmp|png'。
• 上传按钮文字 (必需): 按钮上显示的文字，'上传图片'。
• 是否远程上传 (可选): 是否开启远程附件功能，默认为 0 (关闭)。
• 上传目录 (可选): 指定上传到哪个子目录，如果不填，则使用后台设置的默认目录，如果你想指定，可以写成 'wap/'，这样图片就会上传到 /uploads/wap/ 目录下。

第四步：访问并测试

1. 保存模板：保存你修改过的 article_add.htm 文件。
2. 清除缓存：在后台【生成】-> 【一键更新缓存】 中清除所有缓存。
3. 访问WAP站点：通过手机浏览器或浏览器的“开发者工具 -> 设备模拟”功能，访问你的WAP站点。
4. 进入文章发布页：登录WAP后台，找到“发布文章”或“添加文章”的入口。
5. 测试上传：
   • 点击你添加的“上传图片”按钮。
   • 手机会弹出文件选择器,让你从相册中选择图片或拍照。
   • 选择图片后,点击“确定”。
   • 页面会进行无刷新上传,上传成功后，图片的URL会自动插入到下方的内容编辑框中。
   • 如果上传失败,检查页面底部的错误信息或你添加的 <span id="uploadmsg"> 中显示的提示。

常见问题与解决方法

问题1：点击上传按钮没反应，或提示 DedeXHTTP is not defined

• 原因：织梦的核心JavaScript文件（dedeajax2.js）没有正确加载。
• 解决：
  1. 检查 dedeajax2.js 文件是否存在于 /include/ 目录下。
  2. 检查模板中引入该文件的路径是否正确：src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"。
  3. 确保你的WAP模板正确加载了这个JS文件。

问题2：上传失败，提示“上传目录不存在或没有写入权限”

• 原因：服务器上 /uploads/ 目录或你指定的子目录（如 /uploads/wap/）的权限不正确。
• 解决：
  1. 通过FTP或SSH连接你的服务器。
  2. 找到 uploads 目录及其子目录。
  3. 将其权限设置为 755（目录）和 644（文件），如果还不行，可以尝试 777（注意：775有安全风险，上传成功后请改回755）。
  4. 确保Web服务器用户（如 www-data, apache, nginx）对该目录有写入权限。

问题3：上传成功，但图片无法显示，路径错误

• 原因：图片上传到了服务器，但织梦在生成文章时，图片路径可能有问题。
• 解决：
  1. 登录FTP,检查图片是否真的上传到了 /uploads/ 目录下。
  2. 检查后台【系统】-> 【核心设置】 中的“网站根目录”和“附件目录”设置是否正确。
  3. 确保WAP模板中使用的图片标签（如 {dede:field.body/}）能正确解析相对路径，通常织梦会自动处理。

问题4：我想使用更现代的上传方式，比如HTML5

• 说明：FlashUpload 是一个基于Flash或传统表单的上传方法，相对老旧，如果你想要更好的用户体验，可以自己编写基于HTML5 FormData 的AJAX上传代码，但这需要你具备一定的JavaScript和PHP后端开发能力。
• 思路：
  1. 在模板中创建一个 <input type="file">
  2. 监听其 onchange 事件，获取文件。
  3. 使用 FormData 对象和 XMLHttpRequest (或 fetch) 将文件异步发送到织梦的一个处理脚本（media_add.php 或自定义的 upload_wap.php）。
  4. 在后端处理脚本中,接收文件，进行安全校验（文件类型、大小、重命名等），然后移动到指定目录。
  5. 将上传成功后返回的图片URL,通过JS插入到内容编辑器中。