w间接促使了用户注意图片的顺序，进一步优化的方向的是手指触动或鼠标点击来同时进行图片的增删和调序，避免精确的数字输入。

有效code

 <form action="wcon/wact" method="post" enctype="multipart/form-data">

     配图张数:<input type="text" name="winput" id="winput" WWclass="f1 easyui-textbox">

     <div id="wcontainer"></div>

 </form>

 <script type="text/javascript">

     document.getElementById("winput").addEventListener("change", wonchange);

     function wonchange() {

         var w = document.getElementById("winput").value;

         var winnerhtml = '<table>';

         for (var wone = 0; wone < w; wone++) {

             var newItem = document.createElement("tr")

             var wnode = document.createElement("input")

             newItem.appendChild(wnode)

             wnode.type = "file"

             wnode.name = "wimg" + wone

             var winsert = '<tr><td><span style="color: red">第' + (wone + 1) + '张</span></td><td><input class="where" type="file" name="wimg' + wone + '" id="wimg' + wone + '" onchange="previewFile(' + wone + ')" >'

             winsert += '</td><td><img id="wpreview' + wone + '"    src="" alt="第' + (wone + 1) + '张" >';

             winsert += '</td></tr>'

             winnerhtml += winsert;

         }

         winnerhtml += '</table>';

         $("#wcontainer").html(winnerhtml);

     }

     function previewFile(wone) {

         var preview = document.getElementById('wpreview' + wone);

         var wtags = document.getElementsByClassName('where');

         var file = wtags[wone].files[0]

         var reader = new FileReader();

         reader.addEventListener("load", function () {

             preview.src = reader.result;

         }, false);

         if (file) {

             reader.readAsDataURL(file);

         }

     }

 </script>

场景code

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>admin-index</title>

     <link rel="stylesheet" type="text/css" href="/jquery-easyui-1.5.1/themes/default/easyui.css">

     <link rel="stylesheet" type="text/css" href="/jquery-easyui-1.5.1/themes/icon.css">

     <script type="text/javascript" src="/jquery-easyui-1.5.1/jquery.min.js"></script>

     <script type="text/javascript" src="/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

 </head>

 <body>

 <h2>testing</h2>

 <div style="margin:20px 0 2em 0;"></div>

 <div class="easyui-tabs">

     <div title="销量" style="padding:2em">

         <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>

     </div>

     <div title="在售" data-options="iconCls:'icon-ok',closable:true" style="padding:2em">

         <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>

     </div>

     <div title="调价" data-options="iconCls:'icon-redo',closable:true" style="padding:2em">

         This is the help content.

     </div>

     <div title="新品" data-options="iconCls:'icon-add',closable:true" style="padding:2em">

         <div class="easyui-panel" title="Ajax Form" style="padding:2em;">

             <form id="ff" action="wcon/wact" method="post" enctype="multipart/form-data">

                 <table>

                     <tr>

                         <td>名称:</td>

                         <td><input name="w0" class="f1 easyui-textbox"></td>

                     </tr>

                     <tr>

                         <td>描述:</td>

                         <td><input data-options="multiline:true" name="w1" class="f1 easyui-textbox"></td>

                     </tr>

                     <tr>

                         <td>进价:</td>

                         <td><input name="w2" class="f1 easyui-textbox"></td>

                     </tr>

                     <tr>

                         <td>售价:</td>

                         <td><input name="w3" class="f1 easyui-textbox"></td>

                     </tr>

                     <tr>

                         <td>开售:</td>

                         <td><input type="radio" name="w4" value="1" checked>是

                             &nbsp;&nbsp;<input type="radio" name="w4" value="0">否

                         </td>

                     </tr>

                     <tr>

                         <td>配图张数:<input type="text" name="winput" id="winput" WWclass="f1 easyui-textbox"></td>

                     </tr>

                     <tr>

                         <td></td>

                         <td><input type="submit" value="提交"></td>

                     </tr>

                 </table>

                 <div id="wcontainer"></div>

             </form>

         </div>

     </div>

     <div title="下架" data-options="iconCls:'icon-remove',closable:true" style="padding:2em">

         This is the help content.

     </div>

     <div title="库存" data-options="iconCls:'icon-lock',closable:true" style="padding:2em">

         This is the help content.

     </div>

     <div title="BI" data-options="iconCls:'icon-more',closable:true" style="padding:2em">

         This is the help content.

     </div>

     <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:2em">

         This is the help content.

     </div>

 </div>

 </body>

 </html>

 <script type="text/javascript">

     document.getElementById("winput").addEventListener("change", wonchange);

     function wonchange() {

         var w = document.getElementById("winput").value;

         var winnerhtml = '<table>';

         for (var wone = 0; wone < w; wone++) {

             var newItem = document.createElement("tr")

             var wnode = document.createElement("input")

             newItem.appendChild(wnode)

             wnode.type = "file"

             wnode.name = "wimg" + wone

             var winsert = '<tr><td><span style="color: red">第' + (wone + 1) + '张</span></td><td><input class="where" type="file" name="wimg' + wone + '" id="wimg' + wone + '" onchange="previewFile(' + wone + ')" >'

             winsert += '</td><td><img id="wpreview' + wone + '"    src="" alt="第' + (wone + 1) + '张" >';

             winsert += '</td></tr>'

             winnerhtml += winsert;

         }

         winnerhtml += '</table>';

         $("#wcontainer").html(winnerhtml);

     }

     function previewFile(wone) {

         var preview = document.getElementById('wpreview' + wone);

         var wtags = document.getElementsByClassName('where');

         var file = wtags[wone].files[0]

         var reader = new FileReader();

         reader.addEventListener("load", function () {

             preview.src = reader.result;

         }, false);

         if (file) {

             reader.readAsDataURL(file);

         }

     }

     //    $(function () {

     //        $('#ff').form({

     //            success: function (result) {

     //                var result = eval('(' + result + ')');

     //                $.messager.show({

     //                    title: 'Info',

     //                    msg: result.Msg

     //                });

     //            }

     //        });

     //    });

 </script>

w本地多图预览、多图上传、排序，用户仅需两次操作：决定选哪几张图和图的顺序，尽量减少用户操作。

QQ空间发表日志的图片上传功能实现的更多相关文章

  1. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

  2. Ueditor图片上传功能的配置

    之前的项目中碰到过图片上传功能的配置问题,但是没有记录下来,今天有个朋友突然又问到了我这个问题,当时没想起来之前怎么解决的,后来看了Ueditor的官方文档才回想起来. 官网文档巨多,一般大家遇到问题 ...

  3. java模拟表单上传文件，java通过模拟post方式提交表单实现图片上传功能实例

    java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...

  4. drupal中安装CKEditor文本编辑器，并配置图片上传功能 之 方法二

    drupal中安装CKEditor文本编辑器,并配置图片上传功能 之 方法一 中介绍了ckeditor的安装和配置方法,其实还有另一种新方法,不用IMCE模块. 不过需要ckfinder的JS库,可以 ...

  5. QQ空间魔力日志大全SduSRZ

    大家好~最近,在QQ空间里出现了一种神奇的日志,谁看显示谁的信息,在个人中心显示的是一张图片,在日志里显示的又是另一张图片.这就是传说中的魔力日志.魔力日志从今年的9月份开始盛行,因为具有谁看就针对谁 ...

  6. php模拟用户自动在qq空间发表文章的方法

    我们这里是一个简单的利用php来模拟登录后再到QQ空间发送文章的一个简单的程序,有需要的朋友可以参考,或改进可以给我意见,代码如下: <?php //模拟get post请求函数 http:// ...

  7. FLASH图片上传功能—从百度编辑器UEditor里面提取出来

    为了记录工作中碰到的各种问题,以及学习资料整理,今天开始,将以往的文章进行了一个整理,以后也开始认真的记录学习过程中的各种问题 在HTML里面的文件上传功能一直是个问题,为了实现上传文件大小限制,怎样 ...

  8. Dede后台广告管理模块增加图片上传功能插件

    用户问题:网站广告后台管理非常方便,但是织梦后台的广告管理模块,发布广告时图片没有上传选项,只能用URL地址,很不方便,那么织梦帮就教大家一个方法实现广告图片后台直接上传,非常方便.先给大家看下修改后 ...

  9. 图片上传功能<转>http://blog.csdn.net/u011159417/article/details/50126023

    以前也实现过上传,只不过每次都是,写完之后没有总结,下次遇到时,还要重新写,重新调式,很是浪费时间,所以,今天实现一个上传图片的功能,包括简单的页面和servlet,下次再要写这个功能时,直接拿过来就 ...

随机推荐

  1. Selenium - 设置元素等待

    一.sleep () 休眠方法   --time 固定等待 在开发自动化框架过程中,最忌讳使用Python自带模块的time的sleep方法进行等待,虽然可以自定义等待时间,但当网络条件良好时, 依旧 ...

  2. cocos2d-x的win32编译环境

    1>     检查或配置VS 1.1>头文件 [c/c++]->附加包含目录 1.2>依赖库 [链接器]->[输入]->[附加依赖项] 2>     可能出现 ...

  3. docker + ubuntun 安装show doc

    基本安装步骤 Ubuntu Docker 安装 Docker 支持以下的 Ubuntu 版本: Ubuntu Precise 12.04 (LTS) Ubuntu Trusty 14.04 (LTS) ...

  4. Matlab三维绘图

    三维绘图 1 三维绘图指令 类 别 指 令 说 明 网状图 mesh, ezmesh 绘制立体网状图 meshc, ezmeshc 绘制带有等高线的网状图 meshz 绘制带有“围裙”的网状图 曲面图 ...

  5. inline-block元素的空白间距解决方法<转>

    使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果.有关于使用inline-block来代替float的讨论也蛮多的. 不过就是使用inline ...

  6. SpringBoot配置使用jsp页面技术

    SpringBoot配置使用jsp页面技术 1.pom配置 package配置必须为war类型 添加依赖 <packaging>war</packaging> <depe ...

  7. 去掉Scala的糖衣(4) -- Type Aliase

    我的新博客地址:http://cuipengfei.me/blog/2013/12/23/desugar-scala-4/ Scala中有一个type关键字,用来给类型或者是操作起别名,用起来很是方便 ...

  8. 树形dp - BNU 39572 Usoperanto

    Usoperanto Problem's Link Mean: 给定n个单词,每个单词可以作为形容词来修饰其他单词. 如果当前单词Wi修饰Wj,那么这个修饰的代价是:Wi~Wj之间的单词的总长度. 你 ...

  9. 数学 - Codeforces Round #319 (Div. 1)A. Vasya and Petya's Game

    Vasya and Petya's Game Problem's Link Mean: 给定一个n,系统随机选定了一个数x,(1<=x<=n). 你可以询问系统x是否能被y整除,系统会回答 ...

  10. 使用Javascript实现随机字符串

    方法一(其实是毫秒时间数字字符串): function randomString() { return '' + new Date().getTime(); } 方法二(随机字母数字字符串): var ...