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,下次再要写这个功能时,直接拿过来就 ...

随机推荐

ny33 蛇形填数
蛇形填数时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述在n*n方陈里填入1,2,...,n*n,要求填成蛇形.例如n=4时方陈为: 10 11 12 1 9 16 1 ...
HTTP Header User-Agent的ctf
HAHA浏览器分值: 200 据说信息安全小组最近出了一款新的浏览器,叫HAHA浏览器,有些题目必须通过HAHA浏览器才能答对.小明同学坚决不要装HAHA浏览器,怕有后门,但是如何才能过这个需要安装H ...
cocos2d-x聊天气泡
用cocos2d-x做聊天气泡在网上搜索了一下提示用CCScale9Sprite,这个类可以不缩放边角只缩放中心,正好符合气泡的要求. 说一下思路,头像都是用cocosbuilder做的ccb,在代 ...
rsync详解之exclude排除文件
rsync详解之exclude排除文件问题:如何避开同步指定的文件夹? --excludersync --exclude files and folders http://articles.sl ...
gitolite
gitolite: https://github.com/sitaramc/gitolite https://github.com/sitaramc/gitolite/tags
Android基础总结（六）Activity
创建第二个Activity(掌握) 需要在清单文件中为其配置一个activity标签标签中如果带有这个子节点,则会在系统中多创建一个快捷图标 <intent-filter> <ac ...
MathType中空格个数怎么显示
在使用Word文档的时候很时候用原软件自带的公式编辑器不是很好用,也不方法.MathType就是来解决这个问题的,但是一些用户在使用过程中发现不会看究竟输了多少空格,只能估摸大概.下面本MathTyp ...
C++之类模板
C++之类模板代码如下: C++ Code 123456789101112131415161718192021222324252627282930313233343536373839404142 ...
iOS开发之--NSNotificationCenter的使用
NSNotification是IOS中一个调度消息通知的类,采用单例模式设计,在程序中实现传值.回调等地方应用很广 iOS中通知中心NSNotificationCenter应用总结一.了解几个相关的 ...
sys.argv 详细用法
sys.argv 用于获取命令行参数,用法如下: [root@localhost ~]$ cat 1.py #!/usr/bin/env python #-*- coding:utf-8 -*- im ...

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

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

随机推荐

热门专题