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

随机推荐

android.animation(2) - ValueAnimator的 Interpolator 和 Evaluator
一.插值器插值器,也叫加速器:有关插值器的知识,我在<Animation动画详解(二)——Interpolator插值器>中专门讲过,大家可以先看看这篇文章中各个加速器的效果.这里再讲一 ...
Java线程停止interrupt()方法
程序是很简易的.然而,在编程人员面前,多线程呈现出了一组新的难题,如果没有被恰当的解决,将导致意外的行为以及细微的.难以发现的错误.在本篇文章中,我们针对这些难题之一:如何中断一个正在运行的线程. 中 ...
hdoj 1272 小希的迷宫又一个并查集的简单应用
小希的迷宫 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
0064 MyBatis动态SQL--choose-when-otherwise--foreach--set--bind
读写数据库的时候,往往要根据传入的参数的不同,改变sql语句. 比如:如果传入了某个参数值,那就查询对应的字段,没传入,那就不查,这就是0048中的where--if 再比如: 如果传入了某个参数值, ...
FreeRTOS 任务计数信号量，任务二值信号量，任务事件标志组，任务消息邮箱
以下基础内容转载自安富莱电子: http://forum.armfly.com/forum.php 本章节为大家讲解 FreeRTOS 计数信号量的另一种实现方式----基于任务通知(Task Not ...
STM32F10x_硬件I2C主从通信（轮询发送，中断接收）
Ⅰ.写在前面关注我分享文章的朋友应该知道我在前面讲述过(软件.硬件)I2C主机控制从机EEPROM的例子.在I2C通信主机控制程序是比较常见的一种,可以说在实际项目中,很多应用都会使用到I2C通信. ...
Istio流量管理实现机制深度解析
https://zhaohuabing.com/post/2018-09-25-istio-traffic-management-impl-intro/TOC 前言 Pilot高层架构统一的服务模型 ...
android 全屏设置
更改styles.xml文件  <style name="AppTheme" parent="Theme.AppCompat ...
面向对象分析和设计（OOA/D）
UML不是OOA/D,也不是方法,它仅仅是一种图形表示法(表示的是OOA/D的想法),我们将在OOA/D中应用UML:分析,就是理解客户脑子中的概念,跟客户来沟通,分析出专业术语:设计,对分析出来的专 ...
java------守护线程与非守护线程
最近重新研究Java基础知识,发现以前太多知识知识略略带过了,比较说Java的线程机制,在Java中有两类线程:User Thread(用户线程).Daemon Thread(守护线程) ,(PS:以 ...

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

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

随机推荐

热门专题