QQ空间发表日志的图片上传功能实现

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空间发表日志的图片上传功能实现的更多相关文章

megapix-image插件使用Canvas压缩图片上传解决手机端图片上传功能的问题
最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...
Ueditor图片上传功能的配置
之前的项目中碰到过图片上传功能的配置问题,但是没有记录下来,今天有个朋友突然又问到了我这个问题,当时没想起来之前怎么解决的,后来看了Ueditor的官方文档才回想起来. 官网文档巨多,一般大家遇到问题 ...
java模拟表单上传文件，java通过模拟post方式提交表单实现图片上传功能实例
java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...
drupal中安装CKEditor文本编辑器，并配置图片上传功能之方法二
drupal中安装CKEditor文本编辑器,并配置图片上传功能之方法一中介绍了ckeditor的安装和配置方法,其实还有另一种新方法,不用IMCE模块. 不过需要ckfinder的JS库,可以 ...
QQ空间魔力日志大全SduSRZ
大家好~最近,在QQ空间里出现了一种神奇的日志,谁看显示谁的信息,在个人中心显示的是一张图片,在日志里显示的又是另一张图片.这就是传说中的魔力日志.魔力日志从今年的9月份开始盛行,因为具有谁看就针对谁 ...
php模拟用户自动在qq空间发表文章的方法
我们这里是一个简单的利用php来模拟登录后再到QQ空间发送文章的一个简单的程序,有需要的朋友可以参考,或改进可以给我意见,代码如下: <?php //模拟get post请求函数 http:// ...
FLASH图片上传功能—从百度编辑器UEditor里面提取出来
为了记录工作中碰到的各种问题,以及学习资料整理,今天开始,将以往的文章进行了一个整理,以后也开始认真的记录学习过程中的各种问题在HTML里面的文件上传功能一直是个问题,为了实现上传文件大小限制,怎样 ...
Dede后台广告管理模块增加图片上传功能插件
用户问题:网站广告后台管理非常方便,但是织梦后台的广告管理模块,发布广告时图片没有上传选项,只能用URL地址,很不方便,那么织梦帮就教大家一个方法实现广告图片后台直接上传,非常方便.先给大家看下修改后 ...
图片上传功能<转>http://blog.csdn.net/u011159417/article/details/50126023
以前也实现过上传,只不过每次都是,写完之后没有总结,下次遇到时,还要重新写,重新调式,很是浪费时间,所以,今天实现一个上传图片的功能,包括简单的页面和servlet,下次再要写这个功能时,直接拿过来就 ...

随机推荐

action(二)
RemoveSelf :消失 CCFiniteTimeAction* action = CCSequence::create( CCMoveBy::create( , ccp(,)), CCRotat ...
cocos2d-x 之 CCProgressTimer
--绕圆心转动的进度动画 local function SpriteProgressToRadial() local leftProgress = CCProgressTimer:create(CCS ...
tornado部署
1.为什么要运行多个tornado实例同步请求时,在应用处理过程中(如数据库查询,磁盘访问),服务器进程不能接受新请求.所以需要运行多个服务器进程实例.异步请求时,在应用处理时,服务器进程是非阻塞的, ...
c函数声明前加typedef是什么情况
刚才看到APUE(高级UNIX环境编程)里面的apue.h中有一行 typedef void Sigfunc(int); 没搞懂什么意思其实就是定义一个函数指针类型,等价于 typedef void ...
Ubuntu 下添加OpenERP command 快捷启动方式
编辑home目录下的.bashrc文件 alias xjerp="~/odoo/xj/openerp-server -r openerp --addons-path='~/odoo/xj/o ...
Okra框架(一) 简介
Okra是一个构建在Netty框架和Disruptor框架之上轻量级JAVA服务器框架. 使用Netty实现高性能,可灵活扩展的网络通信,使用Disruptor实现高吞吐量,低延迟的并发. Okra主 ...
查看cpu 个数，内存信息
查看物理CPU个数 cat /proc/cpuinfo| grep "physical id"| sort| uniq| wc -l 查看每个物理CPU中core的个数(即核数) ...
jQuery替换内容
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
JAVA面试-HIBERNATE与 MYBATIS的对比
JAVA面试中问及HIBERNATE与 MYBATIS的对比,在这里做一下总结我是一名java开发人员,hibernate以及mybatis都有过学习,在java面试中也被提及问道过,在项目实践 ...
23SpringMvc_各种参数绑定方式-就是<input那种
本篇博文转载自http://www.cnblogs.com/HD/p/4107674.html: SpringMVC的各种参数绑定方式 1. 基本数据类型(以int为例,其他类似):Controlle ...

QQ空间发表日志的图片上传功能实现

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

随机推荐

热门专题